logo标签列表

使用jQuery生成PDF是否可行？

jquerypdf
16

我正在使用Ajax功能来获取我的内容，当jQuery.ajax()成功时，我需要导出PDF。我该怎么做？

7个回答
16

jQuery（因为JavaScript不能）无法从数据创建PDF，但是它可以从服务器获取（像任何其他请求一样），但是无法生成一个。JavaScript没有机制（尽管现在正在实现一些HTML5选项）来创建/保存跨浏览器工作的文件，特别是二进制文件。

11
是的，可以使用JavaScript生成PDF文件... https://dev59.com/oHRB5IYBdhLWcg3wCjcV - Timo Huovinen
1
@YuriKolovsky - 这在所有浏览器中都不起作用，它使用数据URI（可能需要插件），上面的答案仍然是正确的：“JavaScript根本没有一种能够跨浏览器创建/保存文件的机制”。 - Nick Craver
5
大多数网页开发者实际上关心他们的内容至少在大部分浏览器中能够正常使用，如果你不关心，那么要么你在一个受严格控制的内部网络环境中，要么你在做错了什么。 - Nick Craver
5
因此，您应该为内部网络环境开发人员和非内部网络环境开发人员提供答案，因为问题没有提到OP是哪种类型的用户，所以仅仅说不可能会对OP或其他人产生误导。 - Timo Huovinen
2
@TimoHuovinen，您先生应该获得一个辩论徽章。 - Patrick Bard
显示剩余3条评论
5
如果你正在通过AJAX success从服务器检索PDF数据并需要将其作为下载输出给用户，那么只需进行少量的base64编码即可完成。如果我理解正确，你可能有这样一种情况，即服务器在成功时返回PDF或其他数据类型（如XML）。在这种情况下，你需要执行以下两个步骤来处理请求： 1）通过头部确定内容类型。以下是一个根据响应拆分句柄的示例：
$.ajax({

  type: "POST", url: "/test", data: someData, success: function(response, status, xhr){ 
    var ct = xhr.getResponseHeader("content-type") || ""; 
    if (ct.indexOf(‘xml’) > -1) {
      // handle xml here
    }
    if (ct.indexOf(‘pdf’) > -1) {
      // handle pdf here
    }    
  } 
});

2）一旦您获得了PDF内容，您可以使用base64数据技巧将浏览器重定向以显示PDF。首先，将数据内容编码为base64。有几种库可帮助您在Javascript中完成此操作。然后，通过document.location.href返回您的内容：

document.location.href = 'data:application/pdf;base64,' + base64PDFData;

这应该可以满足您的需求。理论上，您可以使用此方法将任何内容类型转发到浏览器。

编辑：

我应该提到，由于安全限制，数据URI在IE中不起作用。

5
如果可能的话，服务器端是生成PDF的更好选择。对于大多数用户来说，它可能会更快，并且通过标准HTTP请求返回文件比当前的客户端选项更加健壮。
话虽如此，这个库将在客户端生成PDF：http://snapshotmedia.co.uk/blog/jspdf 在支持数据URI的浏览器中，它可以直接返回PDF。在其他浏览器中，您可以将其与一个名为Downloadify的Flash组件结合使用以完成相同的操作。
5
3
将以下内容添加到您的脚本中：

添加此代码：

<script src="https://docraptor.com/docraptor-1.0.0.js"></script>


DocRaptor.createAndDownloadDoc("YOUR_API_KEY_HERE", {
    test: false, // test documents are free, but watermarked
    type: "pdf",
    name: planStatus+"_" +assessmentYear+"_"+employeeId+ ".pdf",
    document_content: document.querySelector('#MyDoc').innerHTML, // use this page's HTML
    // document_content: "<h1>Hello world!</h1>",               // or supply HTML directly
    // document_url: "http://example.com/your-page",            // or use a URL
    // javascript: true,                                        // enable JavaScript processing
    // prince_options: {
    //   media: "screen",                                       // use screen styles instead of print styles
    // }
})
复制并粘贴以下代码以生成PDF，您可以为PDF命名任何名称。我已根据我的需要给出了变量的名称。 - Himanshu Singh
2
如果你处理的HTML是一个表格，你可以使用jQuery.dataTables插件和TableTools来生成PDF。它在后台使用Flash，并且在格式方面受到严格限制，但它确实可以生成PDF。

http://datatables.net/extras/tabletools/

0

通过使用以下代码，我们可以在jQuery中生成PDF。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script type="text/javascript">
    $("body").on("click", "#btnExport", function () {

        html2canvas($('[id*=table2]')[0], {
            onrendered: function (canvas) {
                var data = canvas.toDataURL();
                var docDefinition = {
                    content: [{
                        image: data,
                        width: 520,
                       
                    }]
                };
                pdfMake.createPdf(docDefinition).download("Paper.pdf");
            }
        });

        function1 () 

            html2canvas($('[id*=tab1]')[0], {
                onrendered: function (canvas) {
                    var data = canvas.toDataURL();
                    var docDefinition = {
                        content: [{
                            image: data,
                            width: 520,

                        }]
                    };
                    pdfMake.createPdf(docDefinition).download("Paper.pdf");
                }
            });
    });
</script>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接