html2pdf不考虑div的宽度和高度的明确设置

问题描述 投票:0回答:1

我正在生成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

我在这里想念什么?

javascript html-to-pdf
1个回答
0
投票

不设置画布的大小,请设置PDF的大小。类似于:

html2pdf()
    .set({
        filename:petName+'_Kennel_Card_'+sizeSelected+'.pdf',
        margin:1
        jsPDF: {format:[canvasSizeObj.width,canvasSizeObj.height]}
     })
    .from(popupDOMContent)
    .save();
© www.soinside.com 2019 - 2024. All rights reserved.