javascript - html2pdf 不尊重 div 宽度和高度显式设置

标签 javascript html-to-pdf

我正在构建我的 div 元素,并在生成 PDF 时将其放入 html2pdf 库 ( link ) 中。我正在使用这样的 JS 逻辑生成 div 元素的大小:

switch (sizeSelected) {
    case '3x5':
        canvasSizeObj.width = 288;
        canvasSizeObj.height = 480;
        break;
    case '4x6':
        canvasSizeObj.width = 384;
        canvasSizeObj.height = 576;
        break;
    case '5x7':
        canvasSizeObj.width = 480;
        canvasSizeObj.height = 672;
        break;
    case '8x8':
        canvasSizeObj.width = 768;
        canvasSizeObj.height = 768;
        break;
}

var divContent = document.createElement('div'),
    popupDOMContent = document.createElement('div');

    divContent.classList.add('popupDOMContent');
    divContent.setAttribute('style','height:'+canvasSizeObj.height+'px');
    divContent.setAttribute('style','width:'+canvasSizeObj.width+'px');
    document.body.appendChild(divContent);
    popupDOMContent.classList.add('popupDOMContent');

html2pdf()
    .set({filename:petName+'_Kennel_Card_'+sizeSelected+'.pdf',margin:1})
    .from(popupDOMContent)
    .save();

popupDOMContent.remove();

如果我选择不删除它,我可以看到主体上的元素,并且我可以在下面的屏幕截图中看到为该元素设置的大小: enter image description here

但是当我打开 PDF 时,它不支持该尺寸,而是支持全宽,如下面的屏幕截图所示: enter image description here

我在这里缺少什么?

最佳答案

不要设置 Canvas 的大小,而是设置 PDF 的大小。像这样的东西:

html2pdf()
    .set({
        filename:petName+'_Kennel_Card_'+sizeSelected+'.pdf',
        margin:1
        jsPDF: {format:[canvasSizeObj.width,canvasSizeObj.height]}
     })
    .from(popupDOMContent)
    .save();

关于javascript - html2pdf 不尊重 div 宽度和高度显式设置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60115267/

相关文章:

javascript - 如何测试 Angular Directive(指令)范围

javascript - 提交表单时,我不想在出现弹出窗口时加载页面

angular - 如何使用 Angular : HTML into PDF 进行转换

c# - 图像未显示在 wkhtmltoxsharp wrapper for wkhtmltopdf 生成的 pdf 中

c# - 在没有第三方组件的情况下将 ASP.NET MVC ViewResult HTML 呈现为图像

javascript - Html 内容到 Pdf 转换

javascript - 使用 Java 或 JavaScript 将 HTML 页面与 CSS 一起转换为 PDF

javascript - 匿名函数并不总是有返回值

javascript - mocha 如何递归搜索我的 `src` 文件夹以查找特定的文件名模式?

javascript - 除了 render 方法之外,还有什么方法可以在 React 类中获取 props 吗?