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 的库。你可以试试，它是一个很棒的图书馆。