vue3將頁面生成pdf導出的操作指南

更新時間：2023年07月31日 11:22:49 作者：唐志遠

最近工作中有需要將一些前端頁面(如報表頁面等)導出為pdf的需求,下面這篇文章主要給大家介紹了關于vue3 如何將頁面生成 pdf 導出,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

前言

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

步驟

1.引入兩個依賴

npm i html2canvas
npm i jspdf

點擊jsPDF GitHub、jsPDF 文檔查看關于jsPDF更多信息。

2.在utils文件夾下新建html2pdf.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è)務需求  是否在此處鍵入下方水印代碼
    */
    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加上水印，則添加下面這段代碼：

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.在目標頁面引入方法即可

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

<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')">導出</button>

效果如下：