前端导出Word

最近有个简历导出Word的需求，作者学习了下纯前端的导出Word。主要使用 docxtemplater，jszip-utils,jszip,file-saver,docxtemplater-image-module-free依赖包。

安装与简介

npm install docxtemplater jszip-utils jszip file-saver docxtemplater-image-module-free

docxtemplater 支持生成 docx, pptx,xlsx文件
jszip 一个使用 JavaScript 创建、读取和编辑 .zip 文件的库
jszip-utils 与 JSZip 配套的跨浏览器工具集
file-saver FileSaver.js 是在客户端保存文件的解决方案，非常适合在客户端生成文件的 Web 应用程序
docxtemplater-image-module-free 用于处理图片

使用

语法

• {name} 文本
• {#loop} {/loop} 循环
• {#condition} {/condition} 判断
• {%src_url} 图片
• {@input} XML插入
• ......

模板

代码实现

const generateDoc = function () {
  JSZipUtils.getBinaryContent(
    'xxxxxx', // 可以是本地路径也可以通过URL获取模板文件，base64也可
    function (error, content) {
      if (error) {
        console.error(error)
        return
      }
      var opts = {}
      opts.centered = false
      // 有图片需要配置 getImage,getSize
      opts.getImage = function (tagValue, tagName) {
        // tagValue is "https://docxtemplater.com/xt-pro-white.png" and tagName is "image"
        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 [150, 150]

        // FOR IMAGE COMING FROM A URL (IF TAGVALUE IS AN ADRESS) :
        // To use this feature, you have to be using docxtemplater async
        // (if you are calling setData(), you are not using async).
        return new Promise(function (resolve, reject) {
          var image = new Image()
          image.src = url
          image.onload = function () {
            resolve([image.width, image.height])
          }
          image.onerror = function (e) {
            console.log('img, tagValue, tagName : ', img, tagValue, tagName)
            alert('An error occured while loading ' + tagValue)
            reject(e)
          }
        })
      }

      var imageModule = new ImageModule(opts)

      var zip = new JSZip(content)
      var doc = new docxtemplater().loadZip(zip).attachModule(imageModule).compile()

      doc
        .resolveData({
          image: 'xxxxxxxx',
          name: '彭于晏',
          sex: '男',
          study: [
              {
                  time: '2000/09/01-2010/09/01',
                  school: '北大',
                  experience: '怀念在清华的日子'
              },
              {
                  time: '2020/09/01-2030/09/01',
                  school: '清华',
                  experience: '怀念在北大的日子'
              }
          ]
        })
        .then(function () {
          console.log('ready')
          doc.render()
          // 这块内容无需理会
          var out = doc.getZip().generate({
            type: 'blob',
            mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
          })
          // 导出文件
          saveAs(out, 'generated.docx')
        })
    },
  )
}

最后效果图

上述的代码示例仅是较为基础的使用示例，如果对前端生成某些格式的文件感兴趣或有需求可前往docxtemplater官网进行深入学习。

感谢看到最后~
　 ①如果你持有不同的看法，欢迎你在文章下方进行留言、评论。
　 ②如果对你有帮助，或者你认可的话，欢迎给个小点赞，支持一下~　

（文章内容仅供学习参考，如有侵权，非常抱歉，请立即联系作者删除。）