插件准备：

import html2canvas from "html2canvas";

import jsPDF from "jspdf";

import JSZip from "jszip";

import { saveAs } from "file-saver";

 首先HTML标签上声明ID或class，用于获取元素进行canvas转换

const toCanvas = () => {
    let index = currentPage.value - 1;
    let imageWrapper = document.getElementById("record" + index);
    let imageItemWrapper = imageWrapper?.getElementsByClassName("list-box") || [];
    let promises = [];
    for (let i = 0; i < imageItemWrapper.length; i++) {
        let item = imageItemWrapper[i];
        let promise = html2canvas(item, {
            scale: 2,
            logging: false,
            backgroundColor: null,
        });
        promises.push(promise);
    }
    return Promise.all(promises);
};

 
1、单个PDF下载

const download = () => {
    downConfig.disable = true;
    downConfig.loading = true;
    setTimeout(async () => {
        const pdf = new jsPDF();
        try {
            await toCanvas().then(async (canvases) => {
                const canvasWidth = 200;
                const canvasHeight = 280;
                if (!canvases) return;
                for (let index = 0; index < canvases.length; index++) {
                    const canvas = canvases[index];
                    const canvasDataURL = canvas.toDataURL("image/jpeg", 0.3);
                    if (index !== 0) {
                        pdf.addPage();
                    }
                    pdf.addImage(canvasDataURL, "png", 5, 5, canvasWidth, canvasHeight);
                }
                let file_name = userInfo.value[currentPage.value - 1].realname;
                pdf.save(`${file_name}.pdf`);
            });
        } catch (error) {
            console.error("Error downloading PDF:", error);
        } finally {
            downConfig.disable = false;
            downConfig.loading = false;
        }
    }, 100);
};

2、多个PDF下载，并打入压缩包

const downloadAll = () => {
    downConfig.disable = true;
    downConfig.loading = true;
    setTimeout(async () => {
        const zip = new JSZip();
        for (let i = 0; i < userInfo.value.length; i++) {
            handleSwiperChange(i);   //用于循环轮播图，当前页面转换之后自动轮播到下一个
            const canvases = await toCanvas();
            const mergedPdf = await mergeCanvasesToPdf(canvases);
            const pdfContent = mergedPdf.output("blob");
            let file_name = userInfo.value[i].realname;
            zip.file(`${file_name}.pdf`, pdfContent);
        }

        const content = await zip.generateAsync({ type: "blob" });
        saveAs(content, "xxx压缩包.zip");
        downConfig.disable = false;
        downConfig.loading = false;
    }, 100);
};

//轮播图自动播放下一页
const handleSwiperChange = async (index: number) => {
    currentPage.value = index + 1;
    carousel.value.setActiveItem(index);
};

用于循环处理HTML转canvas后逐个塞入PDF

const mergeCanvasesToPdf = async (canvases) => {
    const pdf = new jsPDF();
    const canvasWidth = 200;
    const canvasHeight = 280;

    for (let index = 0; index < canvases.length; index++) {
        const canvas = canvases[index];
        const canvasDataURL = canvas.toDataURL("image/jpeg", 0.3);
        if (index !== 0) {
            pdf.addPage();
        }
        pdf.addImage(canvasDataURL, "png", 5, 5, canvasWidth, canvasHeight);
    }

    return pdf;
};

以上代码是通过HTML转canvas塞入PDF实现的，也可以搜索PDF语法逐个绘制页面。