亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue使用docxtemplater導出word

 更新時間:2025年04月04日 08:54:10   作者:脆  
docxtemplater?是一種郵件合并工具,以編程方式使用并處理條件、循環(huán),并且可以擴展以插入任何內容,下面我們來看看如何使用docxtemplater導出word吧

docxtemplater

docxtemplater 是一種郵件合并工具,以編程方式使用并處理條件、循環(huán),并且可以擴展以插入任何內容(表格、html、圖像)。

npm 是安裝 docxtemplater 最簡單的方法

npm install docxtemplater pizzip --save?
// 安裝 docxtemplater
npm install docxtemplater pizzip  --save
// 安裝 jszip-utils
npm install jszip-utils --save 
// 安裝 jszip
npm install jszip --save
// 安裝 FileSaver
npm install file-saver --save
// 引入處理圖片的插件1
npm install docxtemplater-image-module-free --save
// 引入處理圖片的插件2
npm install angular-expressions --save

vue使用docxtemplater導出word

安裝

// 安裝 docxtemplater
npm install docxtemplater pizzip  --save
// 安裝 jszip-utils
npm install jszip-utils --save 
// 安裝 jszip
 npm install jszip --save
// 安裝 FileSaver
npm install file-saver --save
// 引入處理圖片的插件1
npm install docxtemplater-image-module-free --save
// 引入處理圖片的插件2
npm install angular-expressions --save

準備word模板放至項目public文件夾下

常用語法

1.單個變量使用

{name}

2.數組對象循環(huán)

{#list}  {name} {age} {/list}

3.圖片(base64/url)

{%imgurl}

 封裝導出方法

import docxtemplater from 'docxtemplater';
    import PizZip from 'pizzip';
    import JSZipUtils from 'jszip-utils';
    import { saveAs } from 'file-saver';
    import ImageModule from 'docxtemplater-image-module-free';


    //將對象中值為null和undefined的進行替換
    //參數1 需要處理的對象 參數2 替換后的值
    const replaceNull = (someObj, replaceValue = "***") => {
        const replacer = (key, value) =>
        String(value) === "null" || String(value) === "undefined" ?         replaceValue : value;
        return JSON.parse(JSON.stringify(someObj, replacer));
    }

    /**
     4. 導出docx
     5. @param { String } tempDocxPath 模板文件路徑
     6. @param { Object } data 文件中傳入的數據
     7. @param { String } fileName 導出文件名稱
    */
    export const exportWord = (tempDocxPath, data, fileName) => {
        //過濾空值
           data = replaceNull(data, '')
        function base64DataURLToArrayBuffer(dataURL) {
            const base64Regex =     /^data:image\/(png|jpg|jpeg|svg|svg\+xml);base64,/;
            if (!base64Regex.test(dataURL)) {
                return false;
            }
        console.log(dataURL);
        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;
    }
    // 讀取并獲得模板文件的二進制內容
    JSZipUtils.getBinaryContent(tempDocxPath, (error, content) => {
        if (error) {
            throw error;
        }
        const imageOptions = {
            getImage(tag) {
                return base64DataURLToArrayBuffer(tag);
            },
            getSize() {
                return [100, 100];
            },
        };
        let zip = new PizZip(content);
        let doc = new docxtemplater();
        doc.loadZip(zip);
        doc.attachModule(new ImageModule(imageOptions));
        doc.setData(data);
        
          try {
              doc.render();
          } catch (error) {
              let e = {
                  message: error.message,
                  name: error.name,
                  stack: error.stack,
                  properties: error.properties,
              };
              console.log({
                  error: e
              });
              throw error;
          }
          let out = doc.getZip().generate({
              type: "blob",
              mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
          }); //Output the document using Data-URI
          saveAs(out, fileName);
      });
  };

封裝方法使用

import { exportWord } from '/@/utils/exportFile';

    const handleExport = async (data: any) => {
            exportWord('/wordTemplate/tzd.docx', data, '通知單.docx');
    }

到此這篇關于vue使用docxtemplater導出word的文章就介紹到這了,更多相關vue docxtemplater導出word內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • Vue中的 DOM與Diff詳情

    Vue中的 DOM與Diff詳情

    這篇文章主要介紹了Vue中的 DOM與Diff詳情,文章圍繞主題展開詳細的內容介紹,具有一定的參考價值,感興趣的小伙伴可以參考一下,希望對你的學習有所幫助
    2022-08-08
  • vuejs 動態(tài)添加input框的實例講解

    vuejs 動態(tài)添加input框的實例講解

    今天小編就為大家分享一篇vuejs 動態(tài)添加input框的實例講解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • vue之字符串、數組之間的相互轉換方式

    vue之字符串、數組之間的相互轉換方式

    這篇文章主要介紹了vue之字符串、數組之間的相互轉換方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-07-07
  • vue 單頁應用和多頁應用的優(yōu)劣

    vue 單頁應用和多頁應用的優(yōu)劣

    這篇文章主要介紹了vue 單頁應用和多頁應用的優(yōu)劣,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下
    2020-10-10
  • Vue中的匿名插槽與具名插槽詳解

    Vue中的匿名插槽與具名插槽詳解

    這篇文章主要為大家介紹了Vue中的匿名插槽與具名插槽,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-12-12
  • Vue實現(xiàn)文件上傳和下載功能

    Vue實現(xiàn)文件上傳和下載功能

    這篇文章主要為大家詳細介紹了Vue實現(xiàn)文件上傳和下載功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • uniapp寬屏開發(fā)PC端方案及衍生問題解決辦法

    uniapp寬屏開發(fā)PC端方案及衍生問題解決辦法

    在uniapp中進行寬屏開發(fā),主要是指在電腦端(PC端)使用寬屏顯示效果進行應用的開發(fā),這篇文章主要給大家介紹了關于uniapp寬屏開發(fā)PC端方案及衍生問題解決辦法,需要的朋友可以參考下
    2024-03-03
  • Vue3項目實現(xiàn)前端導出Excel的示例代碼

    Vue3項目實現(xiàn)前端導出Excel的示例代碼

    這篇文章主要介紹了Vue3項目實現(xiàn)前端導出Excel的示例,在vue3的項目中導出Excel表格的功能,可以借助xlsx庫來實現(xiàn),下面是詳細的操作步驟,需要的朋友可以參考下
    2025-01-01
  • vue3?typescript封裝axios過程示例

    vue3?typescript封裝axios過程示例

    這篇文章主要為大家介紹了vue3?typescript封裝axios過程示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-10-10
  • element表格行列的動態(tài)合并示例詳解

    element表格行列的動態(tài)合并示例詳解

    這篇文章主要為大家介紹了element表格行列的動態(tài)合并示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-07-07

最新評論