vue3 如何將頁面生成 pdf 導(dǎo)出

2023-07-18 16:05 作者:蘇軾徒弟 0人讀過 | 我要投稿

原文鏈接：https://fe32.top/articles/vue20003/

前言

最近工作中有需要將一些前端頁面(如報表頁面等)導(dǎo)出為pdf的需求，博主采用的是html2Canvas + jspdf。

步驟

1.引入兩個依賴

BASH

npm i html2canvasnpm i jspdf

點擊?jsPDF GitHub、jsPDF 文檔?查看關(guān)于jsPDF更多信息。

2.在utils文件夾下新建html2pdf.ts文件

Ts

import html2canvas from 'html2canvas';import jsPDF from 'jspdf'export const htmlToPDF = async (htmlId: string, title: string = "報表", bgColor = "#fff") => { ? ?let pdfDom: HTMLElement | null = document.getElementById(htmlId) as HTMLElement ? ?pdfDom.style.padding = '0 10px !important' ? ?const A4Width = 595.28; ? ?const A4Height = 841.89; ? ?let canvas = await html2canvas(pdfDom, { ? ? ? ?scale: 2, ? ? ? ?useCORS: true, ? ? ? ?backgroundColor: bgColor, ? ?}); ? ?let pageHeight = (canvas.width / A4Width) * A4Height; ? ?let leftHeight = canvas.height; ? ?let position = 0; ? ?let imgWidth = A4Width; ? ?let imgHeight = (A4Width / canvas.width) * canvas.height; ? ?/* ? ? 根據(jù)自身業(yè)務(wù)需求 ?是否在此處鍵入下方水印代碼 ? ?*/ ? ?let pageData = canvas.toDataURL("image/jpeg", 1.0); ? ?let PDF = new jsPDF("p", 'pt', 'a4'); ? ?if (leftHeight < pageHeight) { ? ? ? ?PDF.addImage(pageData, "JPEG", 0, 0, imgWidth, imgHeight); ? ?} else { ? ? ? ?while (leftHeight > 0) { ? ? ? ? ? ?PDF.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight); ? ? ? ? ? ?leftHeight -= pageHeight; ? ? ? ? ? ?position -= A4Height; ? ? ? ? ? ?if (leftHeight > 0) PDF.addPage(); ? ? ? ?} ? ?} ? ?PDF.save(title + ".pdf");}

如果你想給pdf加上水印，則添加下面這段代碼：

Ts

const ctx: any = canvas.getContext('2d');ctx.textAlign = 'center';ctx.textBaseline = 'middle';ctx.rotate((20 * Math.PI) / 180);ctx.font = '20px Microsoft Yahei';ctx.fillStyle = 'rgba(184, 184, 184, 0.8)';for (let i = canvas.width * -1; i < canvas.width; i += 240) { ? ?for (let j = canvas.height * -1; j < canvas.height; j += 200) { ? ? ? ?// 填充文字，x 間距, y 間距 ? ? ? ?ctx.fillText('水印名', i, j); ? ?}}

3.在目標頁面引入方法即可

Ts

import { htmlToPDF } from '@/utils/html2pdf'

HTML

<div id="test-id" style="padding: 20px 0;"> ? ?<div style="background: #000;width: 100px;height: 100px;margin: auto;"></div> ? ?<p>test</p> ? ?<p>test</p> ? ?<p>test</p> ? ?<p>test</p> ? ?<p>test</p> ? ?<p>test</p> ? ?<p>test</p></div><button @click="() => htmlToPDF('test-id','test pdf')">導(dǎo)出</button>