Vue导出Word, JSON_vue项目导入word中的文字读取成json

第一步：引包

npm install docxtemplater  --save
npm install pizzip jszip jszip-utils --save
npm install file-saver --save
npm install angular-expressions --save
npm install docxtemplater-image-module-free --save

第二步

新建一个word.js

import PizZip from 'pizzip'
import docxtemplater from 'docxtemplater'
import JSZipUtils from 'jszip-utils'
import { saveAs } from 'file-saver'
 
/**
 * 将base64格式的数据转为ArrayBuffer
 * @param {Object} dataURL base64格式的数据
 */
function base64DataURLToArrayBuffer (dataURL) {
  const base64Regex = /^data:image\/(png|jpg|jpeg|svg|svg\+xml);base64,/
  if (!base64Regex.test(dataURL)) {
    return false
  }
  const stringBase64 = dataURL.replace(base64Regex, '')
  let binaryString
  if (typeof window !== 'undefined') {
    binaryString = window.atob(stringBase64)
  } else {
    binaryString = new Buffer(stringBase64, "base64").toString("binary");
  }
  const len = binaryString.length
  const bytes = new Uint8Array(len)
  for (let i = 0; i < len; i++) {
    const ascii = binaryString.charCodeAt(i)
    bytes[i] = ascii
  }
  return bytes.buffer
}
 
/**
 * @description 导出word, 导出图片需将图片转为base64
 * @param {String} tempDocxPath 模板文件路径
 * @param {Object} wordData 导出数据
 * @param {String} fileName 导出文件名
 * @param {Array} imgSize 自定义图片大小 
 */
export const exportWord = (tempDocxPath, wordData, fileName, imgSize = [150, 150]) => {
  var ImageModule = require('docxtemplater-image-module-free')
  const expressions = require('angular-expressions')
 
  JSZipUtils.getBinaryContent(tempDocxPath, function (error, content) { // 读取并获得模板文件的二进制内容
    if (error) {
      throw error
    }
 
    expressions.filters.size = function (input, width, height) {
      return {
        data: input,
        size: [width, height]
      }
    }
 
    let opts = {} // 图片处理
    opts.centered = false // 图像是否居中
    opts.getImage = (chartId) => {
      return base64DataURLToArrayBuffer(chartId) // 将base64的数据转为ArrayBuffer
    }
 
    opts.getSize = function () {
      return imgSize
    }
 
    const zip = new PizZip(content) // 创建一个PizZip实例，content为模板的内容
    const doc = new docxtemplater() // 创建一个docxtemplater实例对象
    doc.attachModule(new ImageModule(opts))
    doc.loadZip(zip)
    doc.setData(wordData)
 
    try {
      doc.render() // 用模板变量的值替换所有模板变量
    } catch (error) { // 抛出异常
      let e = {
        message: error.message,
        name: error.name,
        stack: error.stack,
        properties: error.properties
      }
      console.log(JSON.stringify({
        error: e
      }))
      throw error
    }
 
    let out = doc.getZip().generate({
      type: 'blob',
      mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
    })
    saveAs(out, fileName)
  })
}

选中图片转base64

let reader = new FileReader();
reader.readAsDataURL(file.raw)
reader.onload = function (e) {
     let img_base64 = e.target.result // 此处为base64数据
}

docx模板

普通数据：{data}

图片数据：{%imgUrl}

遍历数据：{#list}{/list}

注意：创建模板的时候，要直接创建docx文件，创建了doc后面再改成docx导出会报错。

vue-cli3.0创建的项目，模板文件要放在public目录下

导出Word

let imgSize = [200,200]  
let docxData = {}
exportWord('template.docx', docxData, 'word.docx', imgSize)

导出 JSON

import FileSaver from 'file-saver'
let JSONData = {}
const blob = new Blob([JSON.stringify(JSONData, null, 2)], { type: 'application/json' })
FileSaver.saveAs(blob, 'JSONData.json')