jsPDF生成内部包含拉伸元素的pdf

Question

我正在尝试将Html2Canvas与jsPDF结合使用，以从html生成pdf。要存档我正在关注的this quick tutorial。

我正在尝试渲染一个简单的Hello World h1，实际上我得到了pdf和Hello World，但是为了拉伸，我不知道如何更改它以使其正确显示，您可以看到下图：

我已经尝试将PDF对象的配置更改为以下形式：pdf.internal.scaleFactor = 2.25;

但这似乎并没有改变任何东西，我还尝试了其他一些配置更改，但均未成功。

<template>
  <div>
    <a @click="print">Print</a>
    <div id="nodeToRenderAsPDF">
      <h1>Hello World</h1>
    </div>
  </div>
</template>

<script>
import jsPDF from 'jspdf'
import html2canvas from 'html2canvas'

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  methods: {
    print() {
      const filename  = 'ThisIsYourPDFFilename.pdf';

      html2canvas(document.querySelector('#nodeToRenderAsPDF')).then(canvas => {
        let pdf = new jsPDF('p', 'mm', 'a4');
        pdf.internal.scaleFactor = 2.25;
        pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 211, 298);
        pdf.save(filename);
      });
    }
  }
}
</script>

我得到的实际结果是pdf内的拉伸元素，我希望得到的是一个显示hello world的PDF，其大小与浏览器上显示的h1相同。

Answer 1

我对jspdf也有类似的问题。然后，我进入了一个名为pdfmake的库。您可以尝试一下，它的库很棒。