下载图表以及 table PDF

Question

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

下面是 jsfiddle 的 link。

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. It sounds like there is still some issues with it and you aren't alone in asking about SVG for this library.

看了之后我觉得这个 answer sums it up best -- checkout PDFKit which gives you a way to render SVG to PDF although after looking through the documentation, it seems they only allow you to draw? It doesn't show a way to just add an SVG to the PDF document. The answer also mentions a svgToPDF plugin for jsPDF but I looked and apparently this was merged a while ago 所以我不确定它是否真的是一个插件或已经内置了。

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

下载图表以及 table PDF

Download graph as well as table as a PDF

javascript

java

jquery

html

jspdf