在vue中将页面元素转化为图片和pdf导出

1.引入安装依赖

npm install html2canvas --save
npm install jspdf --save

2.引入依赖

import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';

3.封装为函数

// 传入文件名称和document.getElementById('myTable')
export const htmlPdf = async (title, html) => {
  const canvas = await html2Canvas(html);
  const imgData = canvas.toDataURL('image/png');
  // 创建一个a标签用于下载图片
  const link = document.createElement('a');
  link.href = imgData;
  link.download = `${title}.png`; // 设置下载文件的名称

  // 触发下载
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);

  const pdf = new JsPDF('l', 'mm', 'a4');

  // 根据PDF的页面宽度来计算图片的高度，以保持图片的原始比例
  const pdfWidth = pdf.internal.pageSize.getWidth();
  const pdfHeight = pdf.internal.pageSize.getHeight();
  console.log('pdfWidth', pdfWidth, 'pdfHeight', pdfHeight);
  console.log('html.offsetWidth', html.offsetWidth, 'html.offsetHeight', html.offsetHeight);
  const imgScale = pdfWidth / html.offsetWidth;
  const scaledHeight = html.offsetHeight * imgScale;

  // 如果图片的高度超过PDF的高度，我们需要缩放图片以适应PDF
  if (scaledHeight > pdfHeight) {
    const maxHeightScale = pdfHeight / html.offsetHeight;
    imgScale = Math.min(imgScale, maxHeightScale);
    scaledHeight = pdfHeight;
  }

  const scaledWidth = html.offsetWidth * imgScale;

  // 添加图片到PDF，注意这里的宽度和高度是计算后的值
  pdf.addImage(imgData, 'PNG', 0, 0, scaledWidth, scaledHeight);
  // 下载pdf
  pdf.save(`${title}.pdf`);
};

4.大概原理

将页面使用html2canvas转化为图片，再将图片转化为pdf