欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2022年04月19日 09:57:38   作者:Yàο耀耀  
這篇文章主要介紹了vue導(dǎo)出word純前端的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

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

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

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

官網(wǎng)地址

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

注意?。∪绻麛?shù)據(jù)結(jié)構(gòu)中存在數(shù)組。 用{#xxx}{/xxx} 包裹。

數(shù)據(jù)結(jié)構(gòu)示例:

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

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

然后導(dǎo)入需要的包,

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: {
      // 導(dǎo)出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模板?。?!

<template>
? <div>
? ? <button @click="generate">導(dǎo)出</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: '導(dǎo)出word',
? ? ? ? ? nameList: [{
? ? ? ? ? ? ? name: "張三",
? ? ? ? ? ? ? age: 16,
? ? ? ? ? ? ? hobby: ['吃飯', '睡覺', '打豆豆']
? ? ? ? ? ? },
? ? ? ? ? ? {
? ? ? ? ? ? ? name: "李四",
? ? ? ? ? ? ? age: 19,
? ? ? ? ? ? ? hobby: ['抽煙', '喝酒', '打麻將']
? ? ? ? ? ? },
? ? ? ? ? ]
? ? ? ? },
? ? ? }
? ? },
? ? methods: {
? ? ? // 導(dǎo)出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)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。 

相關(guān)文章

  • vue中如何實時監(jiān)聽本地存儲

    vue中如何實時監(jiān)聽本地存儲

    這篇文章主要介紹了vue中如何實時監(jiān)聽本地存儲,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue中下拉框組件的封裝方式

    vue中下拉框組件的封裝方式

    這篇文章主要介紹了vue中下拉框組件的封裝方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • 深入淺析golang zap 日志庫使用(含文件切割、分級別存儲和全局使用等)

    深入淺析golang zap 日志庫使用(含文件切割、分級別存儲和全局使用等)

    這篇文章主要介紹了golang zap 日志庫使用(含文件切割、分級別存儲和全局使用等),本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
    2020-02-02
  • vue $refs動態(tài)拼接獲取值問題

    vue $refs動態(tài)拼接獲取值問題

    這篇文章主要介紹了vue $refs動態(tài)拼接獲取值問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01
  • vue2中filter()的實現(xiàn)代碼

    vue2中filter()的實現(xiàn)代碼

    vue2.0里,不再有自帶的過濾器,需要自己定義過濾器。下面通過實例代碼給大家介紹vue2中filter()的相關(guān)知識,感興趣的朋友一起看看吧
    2017-07-07
  • Vue3滑動到最右驗證功能實現(xiàn)

    Vue3滑動到最右驗證功能實現(xiàn)

    在登錄頁面需要啟動向右滑塊驗證功能,遇到這樣的需求怎么實現(xiàn)呢,下面小編通過示例代碼給大家分享Vue3滑動到最右驗證功能實現(xiàn),感興趣的朋友一起看看吧
    2024-06-06
  • vue中v-for和v-if一起使用之使用compute的示例代碼

    vue中v-for和v-if一起使用之使用compute的示例代碼

    這篇文章主要介紹了vue中v-for和v-if一起使用之使用compute的相關(guān)知識,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-05-05
  • Vue實現(xiàn)DOM元素拖放互換位置示例

    Vue實現(xiàn)DOM元素拖放互換位置示例

    本文主要介紹了Vue實現(xiàn)DOM元素拖放互換位置示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-01-01
  • 淺談Vue頁面級緩存解決方案feb-alive (下)

    淺談Vue頁面級緩存解決方案feb-alive (下)

    這篇文章主要介紹了淺談Vue頁面級緩存解決方案feb-alive(下),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-04-04
  • vue中根據(jù)時間戳判斷對應(yīng)的時間(今天 昨天 前天)

    vue中根據(jù)時間戳判斷對應(yīng)的時間(今天 昨天 前天)

    這篇文章主要介紹了vue中 根據(jù)時間戳 判斷對應(yīng)的時間(今天 昨天 前天),需要的朋友可以參考下
    2019-12-12

最新評論