前端将网页转换为pdf并支持下载与上传

1.pdf下载

javascript 复制代码
handleExport() {
    const fixedH = document.getElementById("fixed-h");
    const pageOne = document.getElementById("mix-print-box-one");
    const pageTwo = document.getElementById("mix-print-box-two");
    fixedH.style.height = '30vh';
    pageOne.style.display = 'block';
    pageTwo.style.display = 'block';
    // 禁止滚动
    document.body.addEventListener('touchmove', this.preventDefaultScroll, { passive: false });
    document.body.addEventListener('wheel', this.preventDefaultScroll, { passive: false });
    html2canvas(pageOne).then((canvasOne) => {
        const imgOne = canvasOne.toDataURL("image/png");
        const pdf = new jsPDF();
        const propsOne = pdf.getImageProperties(imgOne);
        const widthOne = pdf.internal.pageSize.getWidth();
        const heightOne = (propsOne.height * widthOne) / propsOne.width;
        pdf.addImage(imgOne, "PNG", 0, 0, widthOne, heightOne);
        html2canvas(pageTwo).then(canvasTwo => {
            const imgTwo = canvasTwo.toDataURL("image/png");
            const propsTwo = pdf.getImageProperties(imgTwo);
            const widthTwo = pdf.internal.pageSize.getWidth();
            const heightTwo = (propsTwo.height * widthTwo) / propsTwo.width;
            pdf.addPage(); // 分页
            pdf.addImage(imgTwo, "PNG", 0, 0, widthTwo, heightTwo);
            const title = `${this.formOne.application}测试的.pdf`;
            pdf.save(title);
            fixedH.style.height = 'auto';
            pageOne.style.display = 'none';
            pageTwo.style.display = 'none';
            // 恢复滚动
            document.body.removeEventListener('touchmove', this.preventDefaultScroll);
            document.body.removeEventListener('wheel', this.preventDefaultScroll);
        });
    });
}

2.pdf上传

javascript 复制代码
handleUploadPdf(id) {
  const element = document.getElementById("myElementId");
  html2canvas(element).then((canvas) => {
    const imgData = canvas.toDataURL("image/png");
    const pdf = new jsPDF();
    const imgProps = pdf.getImageProperties(imgData);
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;
    pdf.addImage(imgData, "PNG", 0, 0, pdfWidth, pdfHeight);
    // 将 PDF 转换为 Blob 对象
    const blob = pdf.output("blob");
    // 上传文件
    const fileName = "测试的.pdf";
    const formData = new FormData();
    formData.append("file", blob, fileName);
    uploadPdf(formData).then((res) => {
      // 将pdf地址传给后端
      uploadPdfUrl({
        id,
        fileName,
        path: res.fileName,
      });
      console.log("上传成功", res.url);
    });
  });
}
相关推荐
CoderYanger3 分钟前
前端基础——HTML练习项目:填写简历信息
前端·css·职场和发展·html
CodeCraft Studio6 分钟前
国产化PDF处理控件Spire.PDF教程:如何在 C# 中从 HTML 和 PDF 模板生成 PDF
pdf·c#·html·.net·spire.pdf·pdf文档开发·html创建模板pdf
muyouking118 分钟前
深入理解 HTML `<label>` 的 `for` 属性:提升表单可访问性与用户体验
前端·html·ux
软件技术NINI12 分钟前
html css js网页制作成品——饮料官网html+css+js 4页网页设计(4页)附源码
javascript·css·html
软件技术NINI12 分钟前
html css js网页制作成品——HTML+CSS辣条俱乐部网页设计(5页)附源码
javascript·css·html
IT_陈寒29 分钟前
Java性能调优:从GC日志分析到实战优化的5个关键技巧,让你的应用快如闪电!
前端·人工智能·后端
Mintopia35 分钟前
🚀 Next.js API 压力测试:一场前端与后端的“极限拉扯”
前端·后端·全栈
Mintopia39 分钟前
🛡️ 对抗性攻击与防御:WebAI模型的安全加固技术
前端·javascript·aigc
庙堂龙吟奈我何1 小时前
qiankun知识点
前端
SoaringHeart1 小时前
Flutter封装:原生路由管理极简封装 AppNavigator
前端·flutter