react项目用html2canvas导出图片，加粗等样式失效

Question

问题描述

react项目用html2canvas导出图片，加粗等样式失效

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
exportPDF = () => {

let { shop } = this.props;
let element = document.querySelector('.pdf');
let { height } = getComputedStyle(element, false);
let { width } = getComputedStyle(element, false);
let canvas = document.createElement('canvas');
canvas.width = parseInt(width, 10);
canvas.height = parseInt(height, 10);
let context = canvas.getContext('2d');
context.scale(2, 2);
html2canvas(element, {
  useCORS: true,
}).then(canvas => {
  let pdf = new JsPDF('', 'pt', 'a4');
  context.drawImage(canvas, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
  let pdfWidth = canvas.width;
  let pdfHeight = canvas.height;
  let pageHeight = pdfWidth / 592.28 * 841.89;
  let leftHeight = pdfHeight;
  let position = 0;
  let imgWidth = 595.28;
  let imgHeight = 592.28 / pdfWidth * pdfHeight;
  let pageData = canvas.toDataURL('image/jpeg', 1.0);
  if (leftHeight < pageHeight) {
    pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
  } else {
    while (leftHeight > 0) {
      pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight);
      leftHeight -= pageHeight;
      position -= 841.89;
      if (leftHeight > 0) {
        pdf.addPage();
      }
    }
  }
  pdf.save(`${shop.shopName}.pdf`);
});

}

你期待的结果是什么？实际看到的错误信息又是什么？