vue3 pdf转文件流直接上传服务器 html2canvas--jspdf

跟着阿龙学编程

已于 2024-06-04 16:53:02 修改

阅读量548

点赞数

文章标签： pdf 服务器 javascript

于 2023-05-08 09:26:02 首次发布

本文链接：https://blog.csdn.net/longshao_520/article/details/130551806

版权

该代码示例展示了如何在Vue3应用中利用html2canvas和jspdf库将HTML内容转换为PDF，然后将生成的PDF文件转换为文件流，最终上传到服务器。过程中涉及了canvas的处理、页面分页以及数据URL到File对象的转换。

摘要由CSDN通过智能技术生成

vue3 pdf转文件流直接上传服务器 html2canvas--jspdf

import html2Canvas from "html2canvas";
import jsPDF from "jspdf";


// 生成pdf
  html2Canvas(document.getElementById("content"), {
    allowTaint: true, // 是否允许跨域图片
    backgroundColor: "#000", // 背景颜色
    useCORS: true, // 是否使用页面中已添加的 CORS 头部替代其原本的头部来访问跨源图像。这可能会影响同属于相同主机的，但端口号不同的资源的读取
  }).then((canvas) => {
    console.log(canvas.toDataURL);

    const contentWidth = canvas.width;
    const contentHeight = canvas.height;

    //一页pdf显示html页面生成的canvas高度;
    const pageHeight = (contentWidth / 592.28) * 841.89;
    //未生成pdf的html页面高度
    let leftHeight = contentHeight;
    //页面偏移
    let position = 0;

    //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf文档中图片的宽高
    const imgWidth = 595.28;
    const imgHeight = (592.28 / contentWidth) * contentHeight;

    const pageData = canvas.toDataURL("image/png");

    // const pdf = new jsPDF('', 'pt', 'a4');
    // const pdf = new jsPDF("p", "pt", "a4");
    const pdf = new jsPDF("l", "px", "a4", true);

    if (leftHeight <= pageHeight) {
      pdf.addImage(pageData, "PNG", 18, 13, imgWidth, imgHeight, "", "FAST");
    } else {
      while (leftHeight > 0) {
        pdf.addImage(pageData, "PNG", 18, position, imgWidth, imgHeight, "", "FAST");
        leftHeight -= pageHeight;
        position -= 841.89;
        if (leftHeight > 0) {
          pdf.addPage();
        }
      }
    }
    // pdf.save("pdf_name.pdf");
    var pdfData = pdf.output("datauristring"); //获取base64Pdf
    var myfile = dataURLtoFile(pdfData, "123" + ".pdf"); //调用一下下面的转文件流函数
    console.log(myfile);

    setTimeout(async () => {
      const res = await uploadFile(myfile);
      if (res) {
        console.log(res);
      }
    }, 100);
  });






/*
将base64转换为文件,接收2个参数，第一是base64，第二个是文件名字
最后返回文件对象
*/
const dataURLtoFile = (dataurl, filename) => {
  var arr = dataurl.split(","),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], filename, { type: mime });
};