使用html2canvas和jsPDF导出pdf文件、把pdf文件传给后端

需求：前端获取dom节点生成pdf文件，然后将文件传递给后端。

1、引入插件

javascript 复制代码

import html2canvas from "html2canvas";
import jsPDF from 'jspdf'

2、前端导出pdf

javascript 复制代码

// 获取HTML元素
const element = document.getElementById("aswerDom");
const options = {
  dpi: 192,  //dpi属性的值为192，表示图像的分辨率
  scale: 2, //scale属性的值为2，表示图像的缩放比例。
  backgroundColor: "#ffffff",  //backgroundColor属性的值为"#ffffff"，表示图像的背景颜色。
  useCORS: true,// 【重要】开启跨域配置
  allowTaint: true,// 允许跨域图片
};
// 将元素转换为canvas对象
html2canvas(element, options).then((canvas) => {
  let contentWidth = canvas.width;   //获取Canvas(上面元素id 'aswerDom')对象的宽度
  let contentHeight = canvas.height; //获取Canvas(上面元素id 'aswerDom')对象的高度
  // 创建jsPDF对象
  const pdf = new jsPDF('1', 'pt', [contentWidth, contentHeight]); //创建一个新的PDF对象，参数包括页面格式（'1'表示A4纸张）、单位（'pt'）和页面尺寸（[contentWidth, contentHeight]）
  let pageData = canvas.toDataURL('image/jpeg', 1.0);  //将Canvas对象转换为JPEG格式的数据，并将其存储在pageData变量中。1.0表示图片质量
  console.log(pageData)
  pdf.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight);  //将JPEG格式的图片添加到PDF文件中，图片的左上角坐标为(0, 0)，宽度为contentWidth，高度为contentHeight
  pdf.save('问卷统计分析报告' + new Date().getTime() +'.pdf');
});

效果如图：

但是需求是不在本地导出，而是把导出的内容传递给后端，所以需要删掉 pdf.save('问卷统计分析报告' + new Date().getTime() +'.pdf');

javascript 复制代码

......
pdf.addImage(pageData, 'JPEG', 0, 0, contentWidth, contentHeight);  //将JPEG格式的图片添加到PDF文件中，图片的左上角坐标为(0, 0)，宽度为contentWidth，高度为contentHeight
//pdf.save('问卷统计分析报告' + new Date().getTime() +'.pdf');

const pdfBlob = pdf.output('blob');
const formData = new FormData();
formData.append('file', pdfBlob, '问卷统计分析报告' + new Date().getTime() +'.pdf');
formData.append('projectid', props.projectId);
formData.append('projectRlid',selectedQuestionnaires.value[0])
formData.append('projectRlFileType','questionnaire')

// 上传文件
ProjectOperationEvaluationApi.uploadProjectFile(formData).then(res => {
    btnLoading.value = false
    if (res.code == '00000') {
      message.success('问卷关联成功')
      emit('confirm', selectedQuestionnaires.value)
    } else {
        message.error('文件上传失败')
    }
}).catch((error) => {
    btnLoading.value = false
    console.error('文件上传失败:', error)
    message.error('文件上传失败')
})
});

在流程结束时，后端统一导出所有文件：

至此，需求完成！