pdfMake前端導(dǎo)出pdf

目前導(dǎo)出PDF還是后端(或nodejs)比較好. (如果沒(méi)有必要)

導(dǎo)出方案

后端: IText,wkhtmltopdf...等等.

前端: jsPdf,pdfKit,react-pdf...等等.

現(xiàn)在網(wǎng)上一提到前端導(dǎo)出pdf的絕大多數(shù)都是html2canvas + jspdf 實(shí)現(xiàn)html轉(zhuǎn)pdf.這是非常棒的一個(gè)解決方案,不過(guò)它有一個(gè)弊端就是內(nèi)容放大之后會(huì)失真.如果遇到這類(lèi)需求就只能含淚放棄了.html2canvas主要解決的是jspdf中文亂碼的問(wèn)題,因?yàn)槭峭鈬?guó)小哥開(kāi)發(fā)的,所以就沒(méi)考慮過(guò)中文兼容.這些或多或少的pdf框架都有中文亂碼的問(wèn)題.

還有一種是pdfKit的二次封裝 pdfMake .這也是我所采用的方案,相比較jspdf和pdfkit,使用起來(lái)更易上手.也有中文亂碼的解決方案.github地址 官方網(wǎng)站

使用pdfMake

這里我又用到了webWorker,具體原因和配置我后面解釋.

// UI線程--------------------------------------------
import Worker from './components/imppdf.worker.js';
let worker = new Worker(); // 傳入 worker 腳本文件的路徑即可
const dd = {
    content: [
        '中英文測(cè)試',
        'Another paragraph, this time a little bit longer to make sure, this line will be divided into at least two lines'
    ],
    defaultStyle: {
        font: '方正姚體'
    }
};
worker.postMessage(dd);
worker.onmessage = function (event: any) {
  if (event.data?.type === "progress") {
    // 返回的進(jìn)度信息0-1
  } else {
    const link = document.createElement("a");
    link.style.display = "none";
    link.href = URL.createObjectURL(event.data);
    link.setAttribute("download", decodeURI('下載.pdf'));
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };
}

// webWorker-----------------------------------------
import pdfMake from "pdfmake/build/pdfmake"; 
import FZvfs from "./FZYTvfs_fonts"; // .ttf字體文件打包后的js文件
pdfMake.vfs = FZvfs;
pdfMake.fonts = { // 添加字體庫(kù)
  方正姚體: {
    normal: 'FZYTK.TTF',
    bold: 'FZYTK.TTF',
    italics: 'FZYTK.TTF',
    bolditalics: 'FZYTK.TTF',
  }
};
onmessage = function ({ data }) {
  // 工作線程收到主線程的消息
  if(!data) return;
  let pdf = pdfMake.createPdf(data);
  pdf.getBlob((blob) => {
    postMessage(blob)
  }, { progressCallback(num) { postMessage({ type:'progress',num})}});
};

使用中的問(wèn)題

雖然支持svg,但是svg如果很大它無(wú)法配置跨頁(yè)φ(*￣0￣)

這個(gè)問(wèn)題很重要,因?yàn)槲矣胑charts生成的svg圖片,無(wú)法通過(guò)fit屬性壓縮大小(長(zhǎng)寬).所以考慮手動(dòng)切割圖片,但因?yàn)閷?duì)svg的了解不深所以放棄了.后面采用position定位屬性手動(dòng)偏移和計(jì)算,在通過(guò)pagebreak配置分頁(yè).實(shí)現(xiàn)跨頁(yè)效果
下貼手動(dòng)偏移的代碼

interface SvgProps {
  src: string;
  wh: number[]; // [寬,高]
}

const getSvgContents = (svg: SvgProps) => {
  if (!svg) return null;
  let { src, wh } = svg;
  let [width, height] = wh;
  let rw = pageWidth - pageMargins[0] - pageMargins[2];
  let ratio = rw / width;
  let rH = height * ratio;
  let spliteNum = Math.ceil(height / pageHeight); 
  let content = [];
  for (let i = 0; i < spliteNum; i++) {
    content.push({ svg: src, margin: [0, 0, 0, 0], fit: [rw, rH], absolutePosition: { x: 0, y: i && -1 * i * pageHeight }, pageBreak: 'before', preserveLeadingSpaces: true },)
  }
  return content
}

問(wèn)題解決了,但是這就導(dǎo)致生成pdf的時(shí)間變得更長(zhǎng)了 o(￣▽?zhuān)?/em>)o

 chainWebpack(config) {
    config.module.rule()
      .test(/\.worker\.js$/)
      .use('worker-loader')
      .loader('worker-loader')
      .end()
  },

npm install gulp --save-dev

npm install

gulp buildFonts