vue導出word純前端的實現(xiàn)方式

更新時間：2022年04月19日 09:57:38 作者：Yàο耀耀

這篇文章主要介紹了vue導出word純前端的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue導出word純前端實現(xiàn)

最近項目有個需求導出word，純前端實現(xiàn)，查了查資料，用docxtemplater簡直不要太簡單。

直接把官網(wǎng)例子拿過來就可以了。?。?！

官網(wǎng)地址

首先，新建一個docx文件，把模板先寫好。

注意??！如果數(shù)據(jù)結構中存在數(shù)組。用{#xxx}{/xxx} 包裹。

數(shù)據(jù)結構示例：

 wordData: {
          name: '導出word',
          nameList: [{
              name: "張三",
              age: 16,
              hobby: ['吃飯', '睡覺', '打豆豆']
            },
            {
              name: "李四",
              age: 19,
              hobby: ['抽煙', '喝酒', '打麻將']
            },
          ]
        },

模板寫好之后放入項目中。

然后導入需要的包，

npm i docxtemplater pizzip  file-saver  --save

然后在需要的模塊內(nèi)引入

  import 'docxtemplater/build/docxtemplater.js'
  import 'pizzip/dist/pizzip.js'
  import 'pizzip/dist/pizzip-utils.js'
  import 'file-saver'

  methods: {
      // 導出word
      loadFile(url, callback) {
        PizZipUtils.getBinaryContent(url, callback);
      },
      generate() {
        var that = this;
        this.loadFile("../../static/word.docx", function (error, content) {
          if (error) {
            throw error
          };
          var zip = new PizZip(content);
          var doc = new window.docxtemplater().loadZip(zip)
          doc.setData({
            ...that.wordData
          });
          try {
            // render the document (replace all occurences of {first_name} by John, {last_name} by Doe, ...)
            doc.render()
          } catch (error) {
            var e = {
              message: error.message,
              name: error.name,
              stack: error.stack,
              properties: error.properties,
            }
            console.log(JSON.stringify({
              error: e
            }));
            // The error thrown here contains additional information when logged with JSON.stringify (it contains a property object).
            throw error;
          }
          var out = doc.getZip().generate({
            type: "blob",
            mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
          }) //Output the document using Data-URI
          saveAs(out, "output.docx")
        })
      },
    }

到此就完事了。

完整代碼，安裝完包之后直接運行就好。記得放入word模板?。。?/p>

<template>
? <div>
? ? <button @click="generate">導出</button>
? </div>
</template>

<script>
? import 'docxtemplater/build/docxtemplater.js'
? import 'pizzip/dist/pizzip.js'
? import 'pizzip/dist/pizzip-utils.js'
? import 'file-saver'
? export default {
? ? data() {
? ? ? return {
? ? ? ? wordData: {
? ? ? ? ? name: '導出word',
? ? ? ? ? nameList: [{
? ? ? ? ? ? ? name: "張三",
? ? ? ? ? ? ? age: 16,
? ? ? ? ? ? ? hobby: ['吃飯', '睡覺', '打豆豆']
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "李四",
? ? ? ? ? ? ? age: 19,
? ? ? ? ? ? ? hobby: ['抽煙', '喝酒', '打麻將']
? ? ? ? ? ? },
? ? ? ? ? ]
? ? ? ? },
? ? ? }
? ? },
? ? methods: {
? ? ? // 導出word
? ? ? loadFile(url, callback) {
? ? ? ? PizZipUtils.getBinaryContent(url, callback);
? ? ? },
? ? ? generate() {
? ? ? ? var that = this;
? ? ? ? this.loadFile("../../static/word.docx", function (error, content) {
? ? ? ? ? if (error) {
? ? ? ? ? ? throw error
? ? ? ? ? };
? ? ? ? ? var zip = new PizZip(content);
? ? ? ? ? var doc = new window.docxtemplater().loadZip(zip)
? ? ? ? ? doc.setData({
? ? ? ? ? ? ...that.wordData
? ? ? ? ? });
? ? ? ? ? try {
? ? ? ? ? ? // render the document (replace all occurences of {first_name} by John, {last_name} by Doe, ...)
? ? ? ? ? ? doc.render()
? ? ? ? ? } catch (error) {
? ? ? ? ? ? var e = {
? ? ? ? ? ? ? message: error.message,
? ? ? ? ? ? ? name: error.name,
? ? ? ? ? ? ? stack: error.stack,
? ? ? ? ? ? ? properties: error.properties,
? ? ? ? ? ? }
? ? ? ? ? ? console.log(JSON.stringify({
? ? ? ? ? ? ? error: e
? ? ? ? ? ? }));
? ? ? ? ? ? // The error thrown here contains additional information when logged with JSON.stringify (it contains a property object).
? ? ? ? ? ? throw error;
? ? ? ? ? }
? ? ? ? ? var out = doc.getZip().generate({
? ? ? ? ? ? type: "blob",
? ? ? ? ? ? mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
? ? ? ? ? }) //Output the document using Data-URI
? ? ? ? ? saveAs(out, "output.docx")
? ? ? ? })
? ? ? },
? ? }
? }
</script>
<style scoped>
</style>

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: