vue：前端导出word 加图片：前端

原创

已于 2022-04-11 13:12:54 修改 · 1.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue #word2vec

于 2022-04-07 20:04:02 首次发布

本文介绍如何在Vue项目中实现前端导出Word文档，并且包含图片。Word模板存储于项目的static目录下，数据返回后，利用特定包进行Word的导出操作。

导出word
在这里插入图片描述
word模板放在vue的 static 里面

在这里插入图片描述
return中的数据

引入的包

npm i jszip@^2.6.1
npm i file-saver@^2.0.2
npm i docxtemplater@^3.17.6
npm i jszip-utils@^0.1.0
npm i pizzip  
npm i open-docxtemplater-image-module

导入

import docxtemplater from 'docxtemplater'
import PizZip from 'pizzip'
import JSZipUtils from 'jszip-utils'
import {
   
   saveAs} from 'file-saver'

 clients: [
        {
   
   
          "first_name": "John",
          "last_name": "Doe",
          "phone": "+44546546454"
        },
        {
   
   
          "first_name": "Jane",
          "last_name": "Doe",
          "phone": "+445476454"
        }
      ],
      text_: '铁蛋水上漂',
      echartUrl1: localStorage.getItem('echarts1'),
      echartUrl2: sessionStorage.