问题

我尝试使用[html2pdf][1]制作pdf文件。这在某些时候效果很好，但我有两个主要问题。

第一个问题是，当我选择要渲染的元素比窗口视图高度大（可以滚动网站时），在渲染的pdf文档中会出现一种白色空间，导致整个pdf内容向一侧滑动，因此右侧被切断。

第二个问题是关于分页属性。使用分页属性时的问题是，新分页的一小部分位于前一页上，每次分页后，这一小部分会越来越大。

另外，第一个问题在Chrome和Edge中也会出现白色空间，但在Firefox中完全正常。

这是来自html2pdf的代码：

        margin: [0,0,0,0], //top, left, bottom, right
        filename: 'myfile.pdf',
        image: {type: 'jpeg', quality: 0.98},
        html2canvas: {
            scale: 2,
            scrollX: 0,
            scrollY: 0,
            y: 0,
            dpi: 400,
        },
        jsPDF: {
            unit: 'pt',
            format: 'a4',
            orientation: 'portrait',
        },
        pagebreak: {mode: 'css', before: '.break-before', avoid: '.no-break'},
    };

const pdf = html2pdf().set(opt).from(page).toPdf().get('pdf').then(function (pdf) {
     window.open(pdf.output('bloburl'), '_blank');
})```

html文件只是一些常规的div元素，带有更多嵌套的html元素和一个图像。我有一个主div元素，像这样：`<div id="page" style="width: 595pt; padding: 0 20px;background-color: burlywood">`，在该div元素中，我有具有classname `break-before` 的子div元素，以及包含图像的div元素，我为它设置了classname `no-break`。

这是当`page`元素大于窗口视图高度时的外观：

[![White space][2]][2]

这是分页问题（第三个分页）：
[![break-page issue][3]][3]

  [1]: https://www.npmjs.com/package/html2pdf.js?activeTab=readme
  [2]: https://i.stack.imgur.com/IDV89.jpg
  [3]: https://i.stack.imgur.com/Aun74.png

<details>
<summary>英文:</summary>

I try to make pdf file with the [html2pdf][1]. It works at some point very good, but I have two main problem. 

The first, when the element which I select for rendering, is bigger than the window view height (when I can scroll the site), then in the rendered pdf document appears a some kind of white space on the left side, and because of that, the whole pdf content slides aside, so the right side is cut off.

The second problem is with the break-page property. With break-page property the problem is, that a small part of the newly broken page is on the previous page, and after every break-page, this small part will be bigger and bigger.

Also the first problem with the white space on the left side appears in Chrome and in Edge also, but in Firefox works just fine.

Here is the code from html2pdf:

const opt = {
margin: [0,0,0,0], //top, left, bottom, right
filename: 'myfile.pdf',
image: {type: 'jpeg', quality: 0.98},
html2canvas: {
scale: 2,
scrollX: 0,
scrollY: 0,
y: 0,
dpi: 400,
// letterRendering: true,
// windowWidth:500,
},
jsPDF: {
unit: 'pt',
format: 'a4',
orientation: 'portrait',
// compress: true,
// marginLeft: 20,
// marginRight: 20,
// marginTop: 0,
// floatPrecision: 'smart'
},
pagebreak: {mode: 'css', before: '.break-before', avoid: '.no-break'},
// noPdfOpenParams: true
};

const pdf = html2pdf().set(opt).from(page).toPdf().get('pdf').then(function (pdf) {
window.open(pdf.output('bloburl'), '_blank');
})

The html file is just some regular div element with more nested html elements and with one image. I have the main div element like so `<div id="page" style="width: 595pt; padding: 0 20px;background-color: burlywood">` and in that div element I have child div elements with classname break-before, and for the div in which the image is, I have a classname no-break.

Here is how it looks when the `page` element is bigger then the window view height:

[![White space][2]][2]

Here is the break-page issue (at the third break-page):
[![break-page issue][3]][3]


  [1]: https://www.npmjs.com/package/html2pdf.js?activeTab=readme
  [2]: https://i.stack.imgur.com/IDV89.jpg
  [3]: https://i.stack.imgur.com/Aun74.png

</details>


# 答案1
**得分**: 1

我找出了右侧白边的原因。问题出在0.10.1版本上，如果有人遇到相同问题，请尝试使用0.9.3版本，对我来说解决了这个问题。

第二个问题取决于缩放属性。如果我将其设置为1，那么工作正常，但不幸的是质量不是最好的，希望能够使用缩放2，那将是更好的质量。

<details>
<summary>英文:</summary>

I find out what is the cause of the white space on the right side. The problem was the 0.10.1 version, if someone has the same problem try it with the 0.9.3 version, for me it solved the problem. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.min.js"
integrity="sha512-YcsIPGdhPK4P/uRW6/sruonlYj+Q7UHWeKfTAkBW+g83NKM+jMJFJ4iAPfSnVp7BKD4dKMHmVSvICUbE/V1sSw=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>

The second problem depends on the scale property. If I set it to 1, then works fine, sadly the quality isn't the best, would be nice to work with scale 2, that's a much better quility.

</details>