vue 导出word

https://www.cnblogs.com/wuqilang/p/14085382.html

https://blog.csdn.net/weixin_43880497/article/details/106275823 

 yarn add docxtemplater@3.19.7 docxtemplater-image-module-free@1.1.1 file-saver@2.0.5 jszip@2.6.1 jszip-utils@^0.1.0 pizzip@3.0.6

import JSZipUtils from "jszip-utils"
import docxtemplater from "docxtemplater"
import {
  saveAs
} from 'file-saver'
import PizZip from 'pizzip'
const ImageModule = require('docxtemplater-image-module-free');

const {
  downWordPath
} = require('@/config')

 

 

 download() {
      let _this = this
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent(downWordPath, function (error, content) {
        if (error) throw error // 抛出异常
        var opts = {}
        opts.centered = false;
        opts.getImage = function (tagValue, tagName) {
          return new Promise(function (resolve, reject) {
            JSZipUtils.getBinaryContent(tagValue, function (error, content) {
              if (error) {
                return reject(error)
              }
              return resolve(content)
            })
          })
        } 
        opts.getSize = function (img, tagValue, tagName) {
          // FOR FIXED SIZE IMAGE :
          return [50, 50];
        }
        var imageModule = new ImageModule(opts);

        let zip = new PizZip(content) // 创建一个JSZip实例,内容为模板的内容
        // let doc=new docxtemplater().loadZip(zip).compile() //没有图片的
        let doc = new docxtemplater().loadZip(zip).attachModule(imageModule)
          .compile(); // 创建并加载docxtemplater实例对象 带有图片的


        doc.resolveData(_this.downloadData).then(function (res) {
          console.log('ready', res)
          doc.render()
          var out = doc.getZip().generate({
            type: 'blob',
            mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
          })
          //输出文档
          saveAs(out, _this.wordName)
        })

      })


    },

downWordPath 文件路径

区分本地和生产环境

 

 

downData 下载数据

 

 

wordName 输出路径

 

 

解决默认勾选框的问题

{#registerNation}{checked}{name}{/registerNation}   registerNation是我自己在template.docx定义的变量 downloadData里面可以找的 。

{checked}全部选中 包括{}  字体选择wingdings2 自动变为这样  

另外千万注意:registerNation单词前后千万不能手贱敲空格 。坑了好久自己

 

 

 

 

   至于上面的 必须在word复制。而 不要wps中复制 !!! 在word复制  前提这份对勾符号换成windings字体 然后再复制到代码中 就出来了 。

 

也是如此操作

 

 解决图片问题

 

posted on 2020-12-09 10:26  章画  阅读(1550)  评论(0编辑  收藏  举报

导航