使用html2Canvas下载图片，canvas的width有上限值

html2Canvas下载图片方法

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

const getJpegOrPdf = (type, id, name) => {
  const element = document.getElementById(id);
  const contentWidth = element.clientWidth; // 获得该容器的宽
  const contentHeight = element.offsetHeight; // 获得该容器的高
  const canvas = document.createElement('canvas');
  const scale = 1; // 清晰度
  canvas.width = contentWidth * scale;
  canvas.height = contentHeight * scale;
  canvas.getContext('2d').scale(scale, scale);

  const opts = {
    scale: 1,
    canvas,
    width: contentWidth * scale,
    height: contentHeight * scale,
    useCORS: true,
    allowTaint: true,
  };
  html2Canvas(element, opts).then((canvas) => {
    const pageData = canvas.toDataURL('image/jpeg', 1.0); // 清晰度

    // 下载图片
    if (type === 'jpeg') {
      const link = document.createElement('a');
      const event = new MouseEvent('click');
      link.download = '导出名.jpeg';
      link.href = canvas.toDataURL();
      link.dispatchEvent(event);
      return;
    }
    // 下载PDF
    let direction = 'portrait';
    if (canvas.width > canvas.height) {
      direction = 'landscape';
    }
    const PDF = new JsPDF(direction, 'pt', [canvas.width, canvas.height]);
    // pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置
    PDF.addImage(pageData, 'JPEG', 0, 0, canvas.width, canvas.height);

    PDF.save('导出名.pdf');
  })
};

export { getJpegOrPdf };

经过测试，canvas的width超过 1000 的时候会被截，所以需要尽量控制下载目标的宽度