Vue2問題：如何在瀏覽器中導出word文檔？4條解決方案！

者 | 大澈

大家好，我是大澈！

遇到難題，可以進問答群，問題直接群里扔，完事總有人會陪你一起搞。

建立這個平臺的初衷：

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 -

DF轉WORD為什么是歷史難題

PDF 轉Word 是一個非常非常普遍的需求，可謂人人忌危，為什么如此普遍的需求，卻如此難行呢，還得看為什么會有這樣的一個需求。

PDF文檔遵循iOS32000的規范是由Adobe 公司推出的文檔格式，之所以應用如此廣泛，是因為PDF精確定位了每個字符的坐標、根據坐標繪制的各種形狀，使用PDF格式傳輸和打印文檔可以保證格式的一致性，然后很多PDF文件是可用于閱讀，展示，打印，但編輯起來是非常困難，如格式調整，文字修改，樣式調整等，那么就衍生了PDF 轉Word這一歷史性的需求，但因為兩者之間采用的編碼規范以及布局機制的完全不一致，導致轉換起來會非常復雜，一般的工具不是格式錯亂，就是內容錯亂，很難達到客戶的原生期望。

其難點在于建立從PDF基于元素位置的格式到Word基于內容的格式的映射。PDF文檔實際并不存在段落、表格的概念，PDF轉Word要做的就是將PDF文檔中“橫、豎線條圍繞著文本”解析為Word的“表格”，將“文本及下方的一條橫線”解析為“文本下劃線”，等等。

兩個工具兩套規則，自古以來兩個工具之間的兼容轉換，除非是為一家所有，會有通用的標準和接口預留，達到很好的兼容性，但 Adobe和微軟都是巨大的科技企業，且兩款軟件功能都是非常強大且覆蓋面全，要做到完美的匹配所有規則更是非常苦難。

對于報表用戶來說，很多用戶會將報表理解為報告，報告自然會聯想到Word，那么就很希望在頁面中展示的內容能夠成 Word 文件來進行存檔，編輯等作用。

ActiveReportsJS 是一款前端的報表開發工具，不與后端關聯，因此想要將展示的HTML 生成Word，研發團隊經過一些調研發現整個過程會非常復雜非常困難，正如他們反饋：“不是一個sprint能解決的問題”，就PDF.js 背后都有強大的Mozilla支撐，更何況Word文檔是依托微軟的Office開發組件去生成的。

但在實際接觸客戶的時候，許多用戶都會來詢問相關內容包括如何用報表設計類似審批表、人事履歷表、檢測報告等很常見的Word報告。用戶對結果都比較滿意，但唯一用戶不滿的是報表結果只能生成pdf。這是傳統，這也是核心需求，也是痛點。

本葡萄就有些很著急，于是不信這個邪，在前端工具如此豐富的情況下，竟沒有一個這樣可用的工具？

開始搜索，打開google，榨干全部腦汁的詞匯量輸入了我需要的關鍵詞，搜索到了以下結果。

乍一看，第一條完全吻合，Node.js 雖說是服務端也不是不可以接受，只要有方案即可。

使用cloudmersive-convert-api-client 實現任意文件格式的轉換

看著非常有戲。

代碼簡單：

但仔細看看代碼，果然老天在為我們送東西的時候都在背后的標好了價格：

心想如果可以，付費就付費吧，畢竟我們也是做付費商業軟件的專業er，版權意識還是需要有的。

點擊登錄，用谷歌賬號登陸成功后，即可在項目中引用cloudmersive-convert-api-client 安裝包。

該JS 庫提供了將近幾十種的API及Class用于處理轉換不同的格式文件：除了將PDF轉Word外，還有其他發的文件格式轉換，使用起來也是非常簡單，

轉換結果測評：

可以識別本地的PDF 文件，轉換結果：

能夠保證90%的格式和樣式，達到要求
圖片可直接導入
背景色無法保留
表格無法直接導入為Word的表格，只能作為但文本
頁眉頁腳信息無法直接導入為Word的頁眉頁腳，只作為文本
部分內容丟失

產品價格

因為整個轉換API 只是CloudMersive 的一個API功能，整個產品還附加其他的安全檢驗等功能，因此產品是按月及并發數收費的。大家可自行搜索了解，不過他們網站倒是提供好了幾個文件轉換的工具非常好用，無需登錄直接獲取轉換結果

嘗試既然有PDF流直接暴力轉換Word文檔，可否？

通過搜索發現PDF對象流直接用JS 轉換為Word 文件是非常困難的，而且經過驗證ARJS 導出PDF 文件可以用Word軟件打開，那么突然想到是否可以找一個中間件，將PDF流直接轉換為doc或docx格式，但搜索一番，嘗試之后，只是在.pdf前面加了document.docx.pdf

該方法嘗試失敗。

跟技術大咖聊了之后，才發現pdf和word雖然本質都是二進制流，但內部的聲明等都是各自文件特有的屬性，因此不能直接轉換，簡而言之就是是什么文件流就只能保存什么文件流。且PDF 和 Word是兩大技術公司背書，直接轉換得用專業的工具，因此此路不通。

曲線救Coder: HTML 轉換PDF 大工將成？

于是乎，退而求其次，HTML 是萬能的，HTML 可以轉萬物， HTML 轉PDF， HTML 轉圖片，HTML 轉Excel等等等，那么 ActiveReportsJS 提供了可將報表導出為HTML 文件且格式完全一致，那么方法來了，我直接使用HTML 轉 Word不是更方便些？Google搜索果然此類資料比PDF 轉Word多了百倍，而且看代碼也是操作非常簡單：

只需3步驟：

1、將報表導出HTML

  var pageReport = new ARJS.PageReport();
            pageReport.load('./BandedReport.rdlx-json')
                .then(function() { return pageReport.run() })
                .then(function(pageDocument) { return HTMLExport.exportDocument(pageDocument) })

2、加工HTML 代碼增加office 標記

  var header = "<html xmlns:o='urn:schemas-microsoft-com:office:office' "+
            "xmlns:w='urn:schemas-microsoft-com:office:word' "+
            "xmlns='http://www.w3.org/TR/REC-html40'>"
                  let reg=/<html>/;
                
                  console.log(reg.test(htmlcode));
                 var test= htmlcode.replace(reg,header);
                 var sourceHTML='data:application/vnd.ms-word;charset=utf-8,'+encodeURIComponent(test);

3、創建 a 標簽，直接下載 doc格式

   var fileDownload = document.createElement("a");
       document.body.appendChild(fileDownload);
       fileDownload.href = sourceHTML;
       fileDownload.download = 'document.doc';
       fileDownload.click();
       document.body.removeChild(fileDownload);

看看結果：效果很Nice

轉換結果測評：

樣式丟失，包括字體顏色，背景色，形狀
圖像丟失
表格可以直接導入為Word表格
圖標保留

4.總結

兩種轉化結果總結如下：

通過一番嘗試也算是有一個Workaround，考慮到報告類的報表一般以文本內容為主，樣式也比較樸素，所以使用html到Word轉換不失為一個快速簡潔的方法，大部分需要保存為Word 還是為了進行二次編輯。本葡萄也在努力尋找HTML 轉Word 樣式保留的方法，有新的進展會給大家更新第二篇。

轉載請注明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。微信公眾號：“葡萄城社區”。

Wiki百科：PDF介紹
Wiki 百科：Word介紹
pdf.js analog for Word Documents
純前端報表控件 ActiveReportsJS

們經常會在網上查找資料，而大多文檔下載都需要付費，有哪些方法能免費將網頁轉換成Word文檔呢？下面一起來看一看吧。

1、直接復制

最簡單的方法就是直接將網頁中所需段落或文字選中后，然后右擊并選擇“復制”，再新建一個Word文檔粘貼進去就可以了。

2、另存為

有一些資料網站做了限制，文字無法選擇，或者選擇之后也復制不了，那么我們可以先將其以網頁進行保存。在網頁任意處右擊并選擇“網頁另存為”；

接著將網頁以HTML文件形式保存到電腦桌面后，雙擊打開這個網頁，就可以隨意進行復制并且粘貼到Word中了，只是這個網頁加載會比較慢，不太建議使用。

3、截圖轉文字

如果有些網頁資料限制多，以上兩種方式都無法操作，那我們可以將需要的頁面內容進行截圖保存，使用一些聊天工具的截圖工具或電腦自帶的屏幕截取都可以。

然后再使用轉換工具將圖片識別成文字就可以啦。我們可以使用speedpdf在線轉換工具的圖片轉Word功能，不僅能識別文字，如果有圖片，也能以原有格式轉換成Word。

首先搜索Speedpdf進入在線轉換后，選擇列表中轉換格式中的“JPG to Word ”；然后將所有保存的圖片批量全部上傳進行轉換，這樣就能將內容轉到同一個Word文檔中。

轉換完成之后直接下載就可以打開Word文檔了，是不是很方便，而且轉換也是免費的哦，強烈推薦這種處理方式呢。

在線咨詢

上一篇：HTML 列表
下一篇：程序員都應該了解的一種數據格式之 JSON

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Vue2問題：如何在瀏覽器中導出word文檔？4條解決方案！

DF轉WORD為什么是歷史難題

使用cloudmersive-convert-api-client 實現任意文件格式的轉換

轉換結果測評：

嘗試既然有PDF流直接暴力轉換Word文檔，可否？

曲線救Coder: HTML 轉換PDF 大工將成？

轉換結果測評：

4.總結

您的項目需求