html2pdf 从页面中间开始打印

发布于 2025-01-11 11:06:32 字数 633 浏览 0 评论 0原文

我正在尝试 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>

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

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

原文

I'm trying out 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' }
    };

When I use this the pdf converts etc but it appears halfway down the first page. All of the content is encapsulated in a div

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

I've tried setting the height and removing almost all the content but it still seems to be placing it in the middle of the page as the starting point.

Is there some way of forcing the code to start at the top of the page?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

面犯桃花 2025-01-18 11:06:32

将 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' }
};

Add scrollY: 0 to the html2canvas object in the html2pdf options:

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' }
};

回复收藏 0 原文

浪荡不羁 2025-01-18 11:06:32

我解决了这个问题。

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

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

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

I solved the issue.

The movement in position of the print is affected by the scroll position of the window. So if the button to create the PDF is at the top of the page and you click it places the text at the top of the PDF. If the button is placed in the visible area of the page and you scroll down until it is at the top of the page - the amount you've scrolled is added to the top of the PDF document.

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

I used this code snippet to solve the issue. When I go to print I scroll to the top of the document before creating the PDF.

回复收藏 0 原文

盗琴音 2025-01-18 11:06:32

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 }
};

在所有设备上强制执行相同结果的方法是临时将屏幕宽度设置为配置的 windowWidth （本例为 800px），例如，使用 document.body.style.width = ' 800px'，创建之前PDF，并在创建 PDF 后将其设置回 100%。

A combination of scrollX, scrollY, x and y worked for me to force the PDF generation from the top left:

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 }
};

A hack to enforce the same result over all devices is to temporarily set the screen width to the configured windowWidth (this case 800px), e.g., using document.body.style.width = '800px', before creating the PDF, and setting it back to 100% after creating the PDF.

回复收藏 0 原文