【问题标题】:Exporting HTML div content as pdf with button click通过单击按钮将 HTML div 内容导出为 pdf
【发布时间】:2017-03-07 06:46:26
【问题描述】:

我想将选定的 div 导出为 PDF。该 div 包含文本、图像和一些图表。

<div id="newdiv">
    <img src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg" height="200px" width="200px">
    <p>A Paragraph A Paragraph A Paragraph A Paragraph</p>
</div>
<button type="button">click</button>

具有所有 CSS 属性

【问题讨论】:

    标签: javascript jquery html css pdf


    【解决方案1】:

    您将需要一个插件,例如:

    我将引用这个很棒的JSFiddle 来向您展示如何做到这一点。下面我过去了我从这个小提琴引用的代码。

    //HTML
        <div id="content">
             <h3>Hello, this is a H3 tag</h3>
    
            <p>a pararaph</p>
        </div>
        <div id="editor"></div>
        <button id="cmd">generate PDF</button>
    
    
    //jQuery  
        var doc = new jsPDF();
        var specialElementHandlers = {
            '#editor': function (element, renderer) {
                return true;
            }
        };
    
       $('#cmd').click(function () {
            doc.fromHTML($('#content').html(), 15, 15, {
                'width': 170,
                    'elementHandlers': specialElementHandlers
            });
            doc.save('sample-file.pdf');
        });
    

    【讨论】:

    • 谢谢 Alejandra,这很好,但我想用图像导出。使用此代码,我无法导出图像。你能举一个文本和图像的例子吗?
    • 哦,我明白了。我不确定是否支持使用此插件导出图像...嗯。另一个呢? npmjs.com/package/html-pdf 这个甚至似乎支持图片,基于我在这里看到的 GitHub 问题:github.com/marcbachmann/node-html-pdf/issues/44
    猜你喜欢
    • 1970-01-01
    • 2014-03-15
    • 2017-05-27
    • 1970-01-01
    • 2012-05-13
    • 1970-01-01
    • 2021-02-17
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多