《vue實現(xiàn)動態(tài)生成并導出world功能》

1. 安裝需要的插件并引入

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

2. 工具utils中新建 exportFile.js 文件，用于將圖片轉(zhuǎn)換為base64格式

// getBase64Sync
export function getBase64Sync(imgUrl) {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.crossOrigin = 'anonymous';
    image.onload = () => {
      const canvas = document.createElement('canvas');
      // 固定畫布尺寸為90x90
      canvas.width = 90;
      canvas.height = 90;
      const ctx = canvas.getContext('2d');
      // 計算縮放比例后居中繪制
      const scale = Math.min(90 / image.width, 90 / image.height);
      const scaledWidth = image.width * scale;
      const scaledHeight = image.height * scale;
      const dx = (90 - scaledWidth) / 2;
      const dy = (90 - scaledHeight) / 2;
      ctx.drawImage(image, dx, dy, scaledWidth, scaledHeight);

      let ext = imgUrl.split('.').pop().toLowerCase();
      if (ext === 'jpg') ext = 'jpeg';
      const mime = `image/${ext}`;
      try {
        const dataurl = canvas.toDataURL(mime, 0.8);
        resolve(dataurl);
      } catch (e) {
        reject(e);
      }
    };
    image.onerror = () => reject(new Error('圖片加載失敗'));
    image.src = imgUrl + (imgUrl.includes('?') ? '&' : '?') + 't=' + Date.now();
  });
}

// base64DataURLToArrayBuffer
export function base64DataURLToArrayBuffer(dataURL) {
  const base64 = dataURL.split(',')[1];
  const binaryString = window.atob(base64);
  const len = binaryString.length;
  const bytes = new Uint8Array(len);
  for (let i = 0; i < len; i++) {
    bytes[i] = binaryString.charCodeAt(i);
  }
  return bytes.buffer;
}

3.引入 exportFile中的函數(shù)

import { getBase64Sync,base64DataURLToArrayBuffer } from '@/utils/exportFile.js'

4.設置.docx模板文件，位置放在public文件下

數(shù)組使用{#data}{/data}包裹起來

展示的字段使用{item}

圖片賦值用到{%img}

模板例如：

5.導出按鈕具體功能實現(xiàn)

/** 方案1，不考慮圖片直接導出 world */
function submitForm() {
  // const htmlContent = document.getElementById('htmlcontent');
  // const blob = new Blob([htmlContent.innerHTML], { type: 'application/msword' });
  // const url = window.URL.createObjectURL(blob);
  // const a = document.createElement('a');
  // a.href = url;
  // a.download = '包裝碼.docx';
  // a.click();
  // window.URL.revokeObjectURL(url);
}

/** 方案2，考慮圖片，導出world */
async function exportWord() {
  try {
    const content = await new Promise((resolve, reject) => {
      //world模板'/boxCode.docx'
      JSZipUtils.getBinaryContent('/boxCode.docx?random=' + Math.random(), (error, data) => {
        error ? reject(error) : resolve(data);
      });
    });

    const zip = new PizZip(content);
    
    let doc = new Docxtemplater();
    
    // 注冊圖片模塊
    const imageOptions = {
      getImage: (tag) => {
        const base64Data = tag.split(',')[1];
        return Buffer.from(base64Data, 'base64');
      },
      // 設置Word中圖片顯示尺寸為90x90
      getSize: () => [90, 90]
    };
    doc.attachModule(new ImageModule(imageOptions));

    doc.loadZip(zip);

    const processedData = await Promise.all(
      currentData.value.map(async (item) => {
        const base64 = await getBase64Sync(item.boxCodeUrl);
        const matches = base64.match(/^data:image\/(\w+);base64,/);
        const validBase64 = matches ? base64 : `data:image/png;base64,${base64}`; //圖片轉(zhuǎn)碼
        return {
          itemCode:item.itemCode?item.itemCode:'',
          batchNumber:item.batchNumber?item.batchNumber:'',
          itemName:item.itemName?item.itemName:'',
          itemModel:item.itemModel?item.itemModel:'',
          itemNumber:item.itemNumber?item.itemNumber:'',
          projectName:item.projectName?item.projectName:'',
          specification:item.specification?item.specification:'',
          vendorName:item.vendorName?item.vendorName:'',
          boxCodeUrl: validBase64 || ''
        };
      })
    )

    doc.setData({ currentData: processedData });//數(shù)據(jù)賦值
    try {
      doc.render();
    } catch (error) {
      console.error('模板渲染錯誤:', error.properties?.errors);
      throw error;
    }
    
    const out = doc.getZip().generate({ 
      type: 'blob',
      mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
    });
    saveAs(out, currentItemName.value + '包裝碼.docx');
  } catch (error) {
    console.error('導出失敗:', error);
    throw error;
  }finally{
   visible.value = false
  }
}

6.導出的world頁面中若需要分頁，在需要分頁的光標位置設置分頁符

注：因為我用到了標簽打印，生成的world打印時縱向橫向樣式展示沒辦法解決，所以將生成的world通過接口轉(zhuǎn)為pdf輸出進行打印

// 生成Word Blob 發(fā)送到后端轉(zhuǎn)換服務

const selectedFile = doc.getZip().generate({

type: 'blob',

mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'

});

const formData = new FormData();

formData.append('file', selectedFile);

fetch(VITE_APP_BASE_API + VITE_AGENT_API+`/md/purchaseorder/convertWordToPDF`, {

method: 'POST',

headers: {

'Authorization': `Bearer ${getToken()}`

},

body: formData

})

.then(response => {

if (!response.ok) {

throw new Error(`服務器返回錯誤: ${response.status}`);

}

return response.blob();

})

.then(blob => {

const url = window.URL.createObjectURL(blob);

const link = document.createElement('a');

link.href = url;

link.setAttribute('download', `${currentItemName.value}` + '包裝碼.pdf' );

document.body.appendChild(link);

link.click();

document.body.removeChild(link);

})

.catch(error => {

console.error('導出失敗:', error);

loadingSubmit.value = false

throw error;

});

posted @ 2025-05-08 09:29 愛聽書的程序猿閱讀(94) 評論(0) 收藏舉報

刷新頁面返回頂部

愛聽書的程序猿

《vue實現(xiàn)動態(tài)生成并導出world功能》

公告