javascript - 以 PDF 格式下载图表和表格

Question

我有一个 D3 图表和一个 bootstrap 表。我想下载在 HTMl 页面上显示的图形和表格。我找到了一些答案，但它们用于表格下载或图表下载。我想要一个合并的 PDF。我尝试使用 jspdf，但我被卡住了。

下面是 jsfiddle 的链接。

http://jsfiddle.net/xzZ7n/3301/

function demoFromHTML() {
    var pdf = new jsPDF('p', 'pt', 'letter');
    // source can be HTML-formatted string, or a reference
    // to an actual DOM element from which the text will be scraped.
    source = $('#customers')[0];

    // we support special element handlers. Register them with jQuery-style 
    // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
    // There is no support for any other type of selectors 
    // (class, of compound) at this time.
    specialElementHandlers = {
        // element with id of "bypass" - jQuery style selector
        '#bypassme': function (element, renderer) {
            // true = "handled elsewhere, bypass text extraction"
            return true
        }
    };
    margins = {
        top: 80,
        bottom: 60,
        left: 40,
        width: 522
    };
    // all coords and widths are in jsPDF instance's declared units
    // 'inches' in this case
    pdf.fromHTML(
    source, // HTML string or DOM elem ref.
    margins.left, // x coord
    margins.top, { // y coord
        'width': margins.width, // max width of content on PDF
        'elementHandlers': specialElementHandlers
    },

    function (dispose) {
        // dispose: object with X, Y of the last line add to the PDF 
        //          this allow the insertion of new lines after html
        pdf.save('Test.pdf');
    }, margins);
}

后端是spring MVC。 JQuery 或 JAVA 中的下载功能都很好。 任何帮助将不胜感激。

Answer 1

出于好奇和经历了很多困难，我不确定 jsPDF 是否是最可靠的。首先，使用 d3.js 将您的图形呈现为 SVG，因此最好的办法是将 SVG 转换为 PDF。我找到了这个 issue而且看起来 fromHTML 仍然是一个非常新的方法(它甚至不在内部文档中......)。

他们确实提到他们支持 addSVG 方法，但我发现也可能 not be as ideal as you would like .听起来它还有一些问题 you aren't alone in asking about SVG for this library .

看了之后我觉得这个answer总结得最好——结帐PDFKit这为您提供了一种将 SVG 渲染为 PDF 的方法，尽管在查看文档后，它们似乎只允许您绘制？它没有显示将 SVG 添加到 PDF 文档的方法。答案还提到了 jsPDF 的 svgToPDF 插件，但我看了看，显然是这个 was merged a while ago所以我不确定它是否真的是一个插件或已经内置。

希望这能提供更多见解。我自己对这个问题很好奇。如果我找到更好的信息，我会更新这个答案。