html2pdf 从页面中间开始打印

Question

我正在尝试 HTML2PDF javascript。

    function createPDF(){
    var element = document.getElementById('printMe');
    var opt = {
        margin:       1,
        filename:     'myfile.pdf',
        image:        { type: 'jpeg', quality: 0.98 },
        html2canvas:  { scale: 1 },
        jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };

当我使用它时，pdf 会进行转换等，但它出现在第一页的中间位置。所有内容都封装在一个div中

<div id="printMe" style="padding: 20px;padding-right:30px;">.....</div>

我尝试设置高度并删除几乎所有内容，但它似乎仍然将其放置在页面中间作为起点。

是否有某种方法可以强制代码从页面顶部开始？

Answer 1

将

scrollY: 0

添加到 html2pdf 选项中的 html2canvas 对象：

var opt = {
    margin:       1,
    filename:     'myfile.pdf',
    image:        { type: 'jpeg', quality: 0.98 },
    html2canvas:  { scale: 1, scrollY: 0 },
    jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
};

Answer 2

我解决了这个问题。

打印位置的移动受窗口滚动位置的影响。因此，如果创建 PDF 的按钮位于页面顶部，并且您单击它，则会将文本放置在 PDF 的顶部。如果按钮位于页面的可见区域，并且您向下滚动直到它位于页面顶部 - 您滚动的量将添加到 PDF 文档的顶部。

    document.body.scrollTop = 0; // For Safari
    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera

我使用这个代码片段来解决这个问题。当我要打印时，我会滚动到文档顶部，然后再创建 PDF。

Answer 3

scrollX

、

scrollY

、

x

和

y

的组合让我可以强制从左上角生成PDF：

const opts = {
  margin: 0,
  filename 'result.pdf',
  image: { type: 'jpeg', quality: 1 },
  html2canvas: {
    backgroundColor: "#fff",
    scale: window.devicePixelRatio,
    y: 0,
    x: 0,
    scrollY: 0,
    scrollX: 0,
    windowWidth: 800,
  },
  jsPDF: { unit: 'px', format: [800, 1600], orientation: 'portrait', precision: 32 }
};

在所有设备上强制执行相同结果的方法是，在创建 PDF 之前将屏幕宽度临时设置为配置的

windowWidth

（本例为 800px），例如使用

document.body.style.width = '800px'

，并在创建 PDF 后将其设置回 100%创建 PDF。

Answer 4

我这里也遇到同样的问题。 我的图像阻止了完整的页面处理 我只是将按钮移至顶部，效果非常好