vue docxtemplater word文档 自动填充 pizzip

 docxtemplater 官网：https://docxtemplater.readthedocs.io/en/latest/index.html  

import PizZip from 'pizzip'
import Docxtemplater from 'docxtemplater'
import JszipUtil from 'jszip-utils'
import FileSave from 'file-saver'
//上面四个是需要用到的，通过npm i xxx即可安装
function fullWord(fileName, data) {
  /**
   * 文件放在public目录下，因此文件路径和文件名相同
   */
  /** 将文件转为二进制 */
  JszipUtil.getBinaryContent(fileName, function(err, res) {
    if (err) {
      console.error(err)
    } else {
      // 将文件转为zip文件
      const pizZip = new PizZip(res)
      // 创建Docxtemplater对象实例并添加zip文件
      const docxtemplater = new Docxtemplater(pizZip)
      // 设置填充内容
      docxtemplater.setData(data)
      // 进行内容填充
      docxtemplater.render()
      // 获取到要下载的文件
      const out = docxtemplater.getZip().generate({
        type: 'blob',
        mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
      })
      // 进行下载
      FileSave(out, fileName)
    }
  })
}
export { fullWord }

其他下载方式： 

 1、通过location.href下载

const out = docxtemplater.getZip().generate({
  type: 'blob',
  mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
})
// 创建blob流
const blob = new Blob([out], { type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' })
// 生成路径
const objectUrl = URL.createObjectURL(blob)
// 下载
window.location.href = objectUrl

2、通过a标签下载

//创建一个a标签
const download = document.createElement('a') 
// 创建路径
const href = window.URL.createObjectURL(blob) 
// 设置a标签
download.style.display = 'none'
download.href = href
// 下载的文件名
download.download = '文件名'
// 将a标签加入body并触发点击事件
document.body.appendChild(download) 
download.click()
// 移除a标签和路径缓存
document.body.removeChild(download) 
window.URL.revokeObjectURL(href) 

 

有疑问请留言