Javascript 使用jsPDF从iframe创建PDF

好的，我已经在互联网上搜索了这个问题的解决方案，但是我什么也找不到。我正试图找到一种方法将iframe的内容保存为PDF。我总是遇到PDF文件空白的问题。看来jsPDF是唯一的方法。我想知道这不起作用的原因是否是因为fromHTML（）函数。我不确定。如果你们中有人想出了解决办法，我将非常感激

以下是一些可以在HTML文件中尝试的示例代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript"></script>
<script>
    function demoFromHTML() {
    var pdf = new jsPDF('p', 'pt', 'letter');
    source = $('#frame')[0];
    specialElementHandlers = {
        '#bypassme': function (element, renderer) {
            return true
        }
    };
    margins = {
        top: 80,
        bottom: 60,
        left: 40,
        width: 522
    };
    pdf.fromHTML(
    source,
    margins.left,
    margins.top, {
        'width': margins.width,
        'elementHandlers': specialElementHandlers
    },

    function (dispose) {
        pdf.save('Test.pdf');
    }, margins);
}
</script>
<button onclick="javascript:demoFromHTML();">PDF</button>
<iframe id="frame" src='https://wikipedia.org/wiki/Main_Page' style="width: 75%;height: 75%;"></iframe>

函数demoFromHTML（）{
var pdf=新的jsPDF（“p”、“pt”、“字母”）；
source=$（'框架'）[0]；
SpecialElementHandler={
“#绕过我”：函数（元素、渲染器）{
返回真值
}
};
边距={
排名：80，
底数：60，
左:40,，
宽度：522
};
pdf.fromHTML(
来源
嗯，左，
页边距。顶部{
“宽度”：边距.width，
“elementHandlers”：specialElementHandlers
},
功能（处置）{
保存（'Test.pdf'）；
}，利润率）；
}
PDF

这里有一个猜测，但我认为这与来自其他域的iframe受到保护这一事实有关。

---

请阅读“跨域策略”，如果这是原因的话，我很确定您不能很容易地解决它。

这里有一个粗略的猜测，但我认为这与来自其他域的iFrame受到保护这一事实有关。 阅读“跨域策略”，如果这是原因，我很确定您无法轻松解决它。

试试看

    var source = window.document.getElementsByTagName(tagName)[0];

而不是

 source = $('#frame')[0];

试一试

而不是

 source = $('#frame')[0];

浏览这篇文章：。提供的脚本允许您将任何HTML元素转换为PDF。我稍微修改了

generate（）

函数，使其采用任何HTML元素id名称，并将其导出为

PDF

文件：

generate=函数（doc）
{
var pdf=新的jsPDF（'p'，'pt'，'a4'）；
pdf.setFontSize（18）；
pdf.fromHTML（document.getElementById（doc），
margins.left，//x坐标
页边距。顶部，
{
//y坐标
宽度：margins.width//PDF上内容的最大宽度
}，函数（dispose）{
headerFooterFormatting（pdf，pdf.internal.getNumberOfPages（））；
}, 
保证金）；
var iframe=document.createElement（'iframe'）；
setAttribute（'style'，'position:absolute；right:0；top:0；bottom:0；height:100%；width:650px；padding:20px；'）；
document.body.appendChild（iframe）；
iframe.src=pdf.output（'datauristring'）；
};浏览本文：。提供的脚本允许您将任何HTML元素转换为PDF。我稍微修改了
generate（）
函数，使其采用任何HTML元素id名称，并将其导出为
PDF
文件：


generate=函数（doc）
{
var pdf=新的jsPDF（'p'，'pt'，'a4'）；
pdf.setFontSize（18）；
pdf.fromHTML（document.getElementById（doc），
margins.left，//x坐标
页边距。顶部，
{
//y坐标
宽度：margins.width//PDF上内容的最大宽度
}，函数（dispose）{
headerFooterFormatting（pdf，pdf.internal.getNumberOfPages（））；
}, 
保证金）；
var iframe=document.createElement（'iframe'）；
setAttribute（'style'，'position:absolute；right:0；top:0；bottom:0；height:100%；width:650px；padding:20px；'）；
document.body.appendChild（iframe）；
iframe.src=pdf.output（'datauristring'）；
};尝试此解决方案

<button id="generatePDF">Generate PDF</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$( '#generatePDF' ).click( function()
{
    var pdf = new jsPDF('a4');
    pdf.text("Some text inside PDF", 10, 10);

    $( '#docpdf' ).attr('src', pdf.output('datauristring'));
});

</script>

<iframe id="docpdf" style="background-color:#EEE; height:400px;">
    PDF goes here 
</iframe>

生成PDF
$（'#generatePDF'）。单击（函数（）
{
var pdf=新的jsPDF（'a4'）；
文本（“pdf中的一些文本”，10,10）；
$（'docpdf'）.attr（'src'，pdf.output（'datauristring'）；
});
这里是PDF
试试这个解决方案

<button id="generatePDF">Generate PDF</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>
$( '#generatePDF' ).click( function()
{
    var pdf = new jsPDF('a4');
    pdf.text("Some text inside PDF", 10, 10);

    $( '#docpdf' ).attr('src', pdf.output('datauristring'));
});

</script>

<iframe id="docpdf" style="background-color:#EEE; height:400px;">
    PDF goes here 
</iframe>

生成PDF
$（'#generatePDF'）。单击（函数（）
{
var pdf=新的jsPDF（'a4'）；
文本（“pdf中的一些文本”，10,10）；
$（'docpdf'）.attr（'src'，pdf.output（'datauristring'）；
});
这里是PDF
以下是跨域策略的良好概述。啊，所以你认为，因为jsPDF不在政策中，所以它不会起作用？那会很有趣。我的意思是，如果有一种方法可以从iframe中提取HTML并将其发送到jsPDF，但我不知道是否有这种方法，这就是问题所在。您无法从其他域访问iFrame中的任何内容。你不能在Iframe中更改css，你不能在Iframe中使用js做一些事情，所以我打赌你也不能用一些javascript插件制作pdf！下面是跨域策略的良好概述。啊，所以你认为，因为jsPDF不在政策中，所以它不会起作用？那会很有趣。我的意思是，如果有一种方法可以从iframe中提取HTML并将其发送到jsPDF，但我不知道是否有这种方法，这就是问题所在。您无法从其他域访问iFrame中的任何内容。你不能在Iframe中更改css，你不能在Iframe中使用js做一些事情，所以我打赌你也不能用一些javascript插件制作pdf！我读了这篇文章，它看起来是一个很好的解决方案，但就我而言，我不能使用任何服务器端处理。我可以使用的只是HTML和JS，链接中的方法需要使用GET和POST，这不是客户端脚本的一部分。我读了这篇文章，它看起来是一个很好的解决方案，但是在我的例子中，我不能使用任何服务器端处理。我可以使用的只是HTML和JS，链接中的方法需要使用GET和POST，这不是客户端脚本的一部分。