整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
者 | 大澈
大家好，我是大澈！
遇到難題，可以進問答群，問題直接群里扔，完事總有人會陪你一起搞。
建立這個平臺的初衷：
1、打造一個問答平臺，一個僅包含前端問題的平臺，讓大家可以高效處理同樣問題。
2、通過不斷積累問題，去練習大家的個人邏輯思維，并順便學習相關的知識點。
3、遇到難題，遇到有共鳴的問題，一起討論，一起沉淀，一起成長。
ONE
需求分析，問題描述
一、需求
點擊導出word按鈕，將頁面任意指定區域的內容，導出為word文檔。
二、問題
1、如何獲取指定內容？
2、如何將HTML內容轉換為Word文檔？
3、如何導出下載Word文檔？
TWO
解決問題，答案速覽
實現代碼如下，復制粘貼即可直接使用。
如果你有時間，具體問題梳理、代碼分析、知識總結，可見第三部分。
一、使用說明
參考網上使用最多的方式，使用 FileSaver.js 和 html-docx-js 庫（或其它將HTML內容轉換為Word文檔的庫）來在Vue組件中導出內容為Word文檔。
但是這種方式只能在服務端實現，在瀏覽器端使用會報錯，這是因為瀏覽器的安全策略限制了對文件系統的直接訪問，以防止惡意腳本濫用用戶的文件系統。
為了避免報錯，您可以考慮以下解決方案：
1、服務器端導出【推薦】：將生成Word文檔的邏輯放在服務器端，通過Vue組件向服務器發送請求，服務器生成并返回Word文檔的下載鏈接或文件。
2、使用其他導出方式：考慮使用其他導出方式，例如將內容轉換為PDF格式或生成HTML格式的文件，以避免瀏覽器限制。
3、考慮使用專門的Word文檔生成庫【導出復雜Word】：如果您需要在瀏覽器中生成復雜的Word文檔，可以考慮使用專門的JavaScript庫，例如docxtemplater或mammoth.js，它們提供了更完整的Word文檔生成功能。
4、考慮使用原生的方式實現【導出簡單Word】。即我們下面要說的，利用a元素的原生文件下載功能來實現Word導出。
二、代碼實例
1、在assets文件夾下新建js文件夾，然后在js文件夾下新建文件exportToWord.js，把下面代碼放進去。
// 導出Word
export const exportToWord = (id, name) => {
// 獲取選中區域Html
const dom = document.getElementById(id)
const content = dom.innerHTML;
const convertedContent = convertToWordDocument(content);
// Html類型數據 轉換為 文件類型數據
const blob = new Blob([convertedContent], { type: 'application/msword' });
// 下載Word文檔
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = name+'.doc' || 'exported.doc';
link.click();
}
//完善Html格式
const convertToWordDocument = (content) => {
const header = `<!DOCTYPE html><html><head><meta charset='utf-8'><title>Exported Document</title></head><body>`;
const footer = `</body></html>`;
return `${header}${content}${footer}`;
}
2、在需要的組件中引入exportToWord函數，直接調用即可。函數接收兩個參數，第一個是指定區域元素的id，第二個是導出Word文檔的名稱。
<template>
<div>
<div id="word_demo">
<h1>標題</h1>
<p style="color: green">綠色字</p>
<p style="color: red">紅色字</p>
<p style="color: dodgerblue">藍色字</p>
</div>
<button @click="downLoad('word_demo', '哈哈哈')">點擊導出word</button>
</div>
</template>
<script>
import { exportToWord } from '@/assets/js/exportToWord'
export default {
methods: {
downLoad(id, name) {
exportToWord(id, name)
},
}
}
</script>THREE
問題解析，知識總結
一、如何獲取指定內容？
這個比較簡單，相信大家都會，這里簡單提一下。
對于組件可以用ref，對于元素可以用id。
二、如何將HTML內容轉換為Word文檔？
通過new Blob對象，將Html類型數據轉換為生成Word文檔的二進制數據。
關于Blob對象：
1、簡介：
Blob（Binary Large Object）是JavaScript中的一個接口，用于表示不可變的、原始數據的類似文件的對象。
它通常用于處理二進制數據，例如圖像、音頻、視頻等。
Blob對象可以包含任意類型的數據，包括文本、數組緩沖區和其他Blob對象。
Blob對象在處理文件上傳、數據傳輸和媒體處理等場景中非常有用。您可以將Blob對象發送到服務器、保存到本地文件系統或使用其他API進行進一步處理。
2、Blob對象的構造函數接受以下參數：
Blob(blobParts, options)：構造函數接受兩個參數。
第一個參數blobParts是一個數組，其中包含將被包含在Blob對象中的數據。數組的元素可以是字符串、ArrayBuffer、ArrayBufferView、Blob對象或其他類似對象。
第二個參數options是一個可選的對象，用于指定Blob對象的屬性。
在options參數中，可以使用以下屬性：
type：指定Blob對象的MIME類型。默認值為空字符串。
endings：指定以何種方式標準化換行符。可能的值是transparent、native和\r\n。默認值是transparent。
3、以下是一些常用的Blob屬性和方法：
屬性：
Blob.size：返回Blob對象的字節大小。
Blob.type：返回Blob對象的MIME類型。
方法：
Blob.slice(start, end, contentType)：
創建并返回一個新的Blob對象，該對象包含原始Blob對象的指定字節范圍。可選參數contentType用于指定新Blob對象的MIME類型。
Blob.arrayBuffer()：
返回一個Promise，該Promise解析為一個ArrayBuffer對象，其中包含Blob對象的整個內容。
Blob.text()：
返回一個Promise，該Promise解析為一個字符串，其中包含Blob對象的文本內容。
Blob.stream()：
返回一個ReadableStream對象，可以用于流式讀取Blob對象的內容。
Blob.text()：
返回一個Promise，該Promise解析為一個字符串，其中包含Blob對象的文本內容。
Blob.stream()：
返回一個ReadableStream對象，可以用于流式讀取Blob對象的內容。
三、如何導出下載Word文檔？
通過a元素的 download 屬性，來實現文件的導出下載。
在 HTML 中，a元素的 download 屬性用于指定一個下載鏈接，告訴瀏覽器該鏈接是要被下載而不是在瀏覽器中打開。這樣，當用戶點擊鏈接時，瀏覽器會彈出一個下載對話框，提示用戶保存文件到本地設備。
download 屬性的值可以是一個文件名，用于指定用戶保存文件時的默認文件名。當用戶點擊下載鏈接時，瀏覽器會使用該值作為默認文件名，但用戶仍然可以選擇其他文件名保存。
請注意，download 屬性并不是所有瀏覽器都支持的新特性。特別是在移動設備上，某些瀏覽器可能會忽略該屬性并在瀏覽器中打開鏈接。因此，在使用 download 屬性時，最好提供一個備用方案，例如在鏈接的文本或旁邊添加一段說明，告訴用戶右鍵點擊鏈接并選擇 "保存鏈接" 或類似選項來下載文件。
- END -
里講一種實現起來比較簡單的html轉pdf下載的實現。
html2canvas jspdf
通過html2canvas，我們可以將指定的一個dom元素，渲染到canvas中，然后從canva中獲得該圖片，并將圖片通過jspdf來生成。
function createPdf (selector,pagesize,direction,title){
var key = pagesize +''+direction;
var settings = {
'00' : {
pdf : {orientation : 'portrait',format : 'a4',unit : 'px'},
width : 448,
height : 632.5
},
'01' : {
pdf : {orientation : 'landscape',format : 'a4',unit : 'px'},
width : 632.5,
height : 448
},
'10' : {
pdf : {orientation : 'portrait',format : 'a3',unit : 'px'},
width : 632.5,
height : 894.2
},
'11' : {
pdf : {orientation : 'landscape',format : 'a3',unit : 'px'},
width : 894.2,
height : 632.5
}
};
var set = settings[key];
var doc = new jsPDF(set.pdf);
var arr = [];//根據順序保存
var $arr = $(selector);
function tempCreate(){
if($arr.length == 0){//沒有啦
//執行生成
tempPdf();
}else{
var $dom = $arr.splice(0,1);
html2canvas($dom[0]).then(canvas => {
var dataurl = canvas.toDataURL('image/png');
arr.push(dataurl);
tempCreate();
});
}
}
function tempPdf(){
arr.forEach((item,i)=>{
if(i !== 0){
doc.addPage();
}
doc.addImage(item,'png',-1,-1,set.width,set.height);//根據不同的寬高寫入
})
//根據當前的作業名稱
doc.save(title+'.pdf');
}
tempCreate();
}需要指定容器(依賴jquery),然后指定紙張A4或 A3，以及橫縱向。
//調用
createPdf('.single-page',0,0,'test')當然，如果是數據量很大的話，就不建議在前臺生成了，最好還是放在后端去做。個人測試過，做A4的圖片生成PDF，當數量大約在100左右的時候，瀏覽器就崩潰了，如果只是幾頁的數據的話，這個方式還是很方便的。
Ps：瀏覽器要是現代瀏覽器哈。
html2canvas : http://html2canvas.hertzen.com/ jspdf :https://github.com/MrRio/jsPDF
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
