摘要：之前項目中導出價格表是由后端實現，前端只需要調用接口下載word即可，后來業務改變比較大，word模版需要一直改動，后端改起來相對麻煩，后來直接前端自己定義模版，實現下載word文檔。

一、需要安裝的依賴

1、docxtemplater

介紹：docxtemplater是一種郵件合并工具，它以編程方式使用，處理條件、循環，并且可以擴展為表格、HTML、圖像等。

安裝方法：cnpm i docxtemplater@^3.9.1

2、FileSaver

介紹：FileSaver.js 是在客戶端保存文件的解決方案，非常適合需要生成文件，或者保存不應該發送到外部服務器的敏感信息的應用。

安裝方法：cnpm i file-saver@^1.3.8

3、jszip

介紹：jszip是一個用于創建、讀取和編輯.zip文件的JavaScript庫，且API的使用也很簡單。

安裝方法：cnpm i jszip@^2.6.1

4、jszip-utils

介紹：jszip-utils是與jszip一起使用的跨瀏覽器的工具庫

安裝方法：cnpm i jszip-utils@^0.0.2

二、創建word模版

介紹：根據自己的業務需求創建需要導出的word模版，變量數據使用{變量名}代替，表格內容數據需要使用{#參數名}開始{/參數名}結尾，具體如下圖：

注意點：1.模板文件使用vue-cli2的時候，放在static目錄下。使用vue-cli3的時候，放在public目錄下。

2.文件須以docx結尾。

不然可能出現的問題：提示Uncaught Error: Corrupted zip: missing 7124 bytes.

vue-cli3示例位置如圖：

三、html代碼編寫

定義下載事件downloadprice

下載價格表

總結

以上是生活随笔為你收集整理的vue 插入word模板 项目_vue项目前端导出word文件(bug解决)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。