Javascript 在引导模式下显示从HTML页面生成的PDF，无需下载_Javascript_Html_Pdf_Bootstrap Modal_Jspdf

Javascript 在引导模式下显示从HTML页面生成的PDF，无需下载

javascript html pdf

Javascript 在引导模式下显示从HTML页面生成的PDF，无需下载,javascript,html,pdf,bootstrap-modal,jspdf,Javascript,Html,Pdf,Bootstrap Modal,Jspdf,是否有任何方法可以从HTML页面/内容生成PDF文件，PDF应在引导模式下显示，而无需直接下载我尝试使用jsPDF，但没有达到预期效果。现在，它不再以引导模式显示在iframe中下面是示例HTML内容，该内容将转换为PDF（无需下载）以在引导模式中显示 <body> <Content will be displayed here> </body> 下面是javascript代码（jsPDF） var pdf=新的jsPDF（“p”、“pt”、“

是否有任何方法可以从

HTML

页面/内容生成

PDF

文件，

PDF

应在引导模式下显示，而无需直接下载

我尝试使用

jsPDF

，但没有达到预期效果。现在，它不再以引导模式显示在iframe中

下面是示例

HTML

内容，该内容将转换为

PDF

（无需下载）以在引导模式中显示

<body>
  <Content will be displayed here>
</body>

下面是javascript代码（jsPDF）


var pdf=新的jsPDF（“p”、“pt”、“字母”）；
pdf.html（document.body{
回调：函数（pdf）{
var iframe=document.createElement（'iframe'）；
setAttribute（'style'，'position:绝对；right:0；top:0；bottom:0；height:100%；width:500px'）；
document.body.appendChild（iframe）；
iframe.src=pdf.output（'datauristring'）；
}
});

我想我已经找到了解决你问题的办法。基本上，它使用

html2canvas

截图，然后将该图像添加到

newjspdf（'p'，'pt'，'letter'）。然后，它从画布创建一个bloburl
，以html
的形式显示在您的模式中。我还添加了另一个功能，可以下载pdf
相关javascript：
//这将是pdf对象
设pdfFinal=null
函数下载PDF（）{
保存（“file.pdf”）；
}
函数showPDF（）{
//创建身体的屏幕截图
html2canvas（document.body，{scale:2，scrollY:-window.scrollY}）。然后（canvas=>{
document.body.appendChild（画布）；
var imgData=canvas.toDataURL（'image/png'）；
//将图像添加到pdf
var pdf=新的jsPDF（'L'，'pt'，[canvas.width，canvas.height]）；
addImage（imgData，'PNG'，0,0，canvas.width，canvas.height）；
//将pdfFinal设置为以后下载
pdfFinal=pdf；
//获取并设置pdf文件的输出
让output=pdf.output（'bloburl'）；
document.getElementById（“pdfObj”）.height=canvas.height/4；
document.getElementById（“pdfObj”）.data=输出；
});
}

此代码必须包含在您的
中：


此模式代码来自：

开放模态
&时代；
模态头
这是你的pdf
下载
接近

希望这有帮助！如果没有，请评论
编辑
现在整个页面都可以放在pdf中了。
更改：增加了更高分辨率的缩放功能
是否仅制作表格的“屏幕截图”？或者整个正文-->document.body
？您想使用jsPDF
还是html2canvas
，因为您已经将它们都包含在文档中了。。。此外，您是否知道您在这里创建了一个
而不是
：var iframe=document.createElement（'div'）？@Chiel，我要整个身体。实际上，它是iframe，我尝试使用div，但不起作用，忘了将其还原回来。现在我对问题进行了编辑。事实上，我不知道使用html2canvas还是jsPDF。这是我在搜索时得到的，似乎离目标更近了，因为我只需要用HTMLdiv替换iframe，最准确地说是bootstrap模式。谢谢。这回答了你的问题吗？嗨@Chiel，多谢了，开始工作了。仍然存在一些小问题，即显示和加载的pdf不适合pdf页面容器（它在右侧断裂）。是否有任何解决方案使内容适合容器体？现在整个页面的内容都添加到了pdf中。是否要将其限制为整个页面以外的特定div的内容？@aneesmakader而不是document.body（整个页面），例如，您还可以传递document.getElementById（“myDiv”）。对于另一个问题，我必须测试它myself@aneesmakader我不知道你说的“它在右边断裂”是什么意思。也许这与缩放有关。也许在document.body
this，{scale:1}后面加上一行代码会有帮助：html2canvas（document.body，{scale:1}）。然后（canvas=>{/code>它的中断意味着，在一定的宽度之后，html内容的剩余部分从右侧被修剪。同样，在底部也会发生同样的情况（似乎只生成了一个页面）。我希望它被澄清）：@aneesmakader希望这个编辑现在能解决您的问题！
<script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script src='../../dist/jspdf.debug.js'></script>
<script>

    var pdf = new jsPDF('p', 'pt', 'letter');
    pdf.html(document.body, {
        callback: function (pdf) {
            var iframe = document.createElement('iframe');
            iframe.setAttribute('style', 'position:absolute;right:0; top:0; bottom:0; height:100%; width:500px');
            document.body.appendChild(iframe);
            iframe.src = pdf.output('datauristring');
        }
    });
</script>