标签: jspdf

使用 jsPDF 在 React js 中将 HTML 转换为 PDF 不起作用

执行以下函数后出现错误在函数中,插入了简单的 HTML div 标签但仍然不起作用

当点击一个按钮生成pdf时,exportPDF函数将被调用

功能

const exportPDF = () => {
   let element=(<div style={{display: "flex",flexWrap:"wrap"}}>Sample Text</div>)
   const doc = new jsPDF();
   doc.html(element, {
       callback: function (doc) {
            doc.save('sample.pdf');
         }
     });
}
Run Code Online (Sandbox Code Playgroud)

错误

jspdf.es.min.js:128 Uncaught (in promise) Error: Unknown source type.
    at Promise.<anonymous> (jspdf.es.min.js:128:1)
Run Code Online (Sandbox Code Playgroud)

我正在使用 jsPDF 的 npm 包 ( "jspdf": "^2.4.0" )

无法弄清楚为什么doc.html在此代码中不起作用

html javascript jspdf reactjs

2
推荐指数
1
解决办法
1万
查看次数

jsPDF - Firefox中的兼容性问题

jsPDF与最新版本的Firefox不兼容.它不允许我下载PDF.有没有解决这个问题?我尝试下载最新版本的jsPDF.

编辑:

  • 我的FF版本是32.0.3
  • 我没有收到任何错误消息.

这是"下载"pdf的代码.它适用于IE和Chrome:

所以我认为这与代码无关.我想知道的是如何在Firefox中下载pdf.

function appendDataToPDF(div, doc, top)
{
    html2canvas(div, {
        background: '#fff',
        onrendered: function(canvas) {
            var img = canvas.toDataURL();
            doc.addImage(img, 'JPEG', 10, top, parseInt($(div).css("width"), 10), parseInt($(div).css("height"), 10));

            if(top > 240)
            {
                doc.addPage();
                top = 27;
            }

            div = $(div).next();

            if(div.length === 0)
            {
                doc.save('doc.pdf');
            }
            else
            {
                if(div.get(0).nodeName === 'BR')
                    div = $(div).next();

                appendDataToPDF(div, doc, top);
            }
        }
    });
}
Run Code Online (Sandbox Code Playgroud)

javascript firefox jspdf

1
推荐指数
1
解决办法
3069
查看次数

jsPdf使用html2canvas.js从html导出pdf不适用于大数据

嗨我使用jsPdf制作HTML内容的pdf,它适用于短内容和创建pdf,但是当我尝试在大内容上使用html2canvas.js(用于渲染css)时,它不会创建pdf.任何建议或示例代码都会有所帮助.谢谢.

html javascript css html2canvas jspdf

1
推荐指数
1
解决办法
2万
查看次数

如何从html和文本创建带有jspdf的pdf?

我需要一起打印我的html语句和文本,我尝试使用下面的代码,但添加的文本不是在PDF中打印.它只打印html内容.请帮我解决这个问题....

    pdf = new jsPDF('l', 'mm', 'ledger'),
    specialElementHandlers = {
      '#editor': function( element, renderer ) {
          return true;
      }
};
pdf.fromHTML(
      $('#customers').get(0) // HTML element
    , 15  // x coord
    , 0.5  // y coord
    , {
          'width': 3000 // was 7.5, max width of content on PDF
        , elementHandlers: specialElementHandlers
    }
);
pdf.text(35, 25, "test");
pdf.save( filename ); 
}); 
Run Code Online (Sandbox Code Playgroud)

javascript jspdf

1
推荐指数
1
解决办法
2760
查看次数

如何在从HTML生成的pdf中添加标题

我正在开发codeigniter。我想将“保存到pdf”功能添加到div之一。我正在使用html2canvas进行打印。我的问题是我想在pdf的标题上添加徽标和一些其他信息,该信息在网页上不可见。我不知道该怎么做。下面是我的代码。

    <script type='text/javascript' src="<?php echo site_url('assets/js/html2canvas.js'); ?>"></script>
    <script type='text/javascript' src="<?php echo site_url('assets/js/jspdf.debug.js'); ?>"></script>

    <script type='text/javascript'>//<![CDATA[ 
    function demoFromHTML() {
         var pdf = new jsPDF('p', 'pt', 'letter');
         pdf.addHTML($('#content')[0], function () {
         pdf.save('test.pdf');
         });

        specialElementHandlers = {
            '#bypassme': function (element, renderer) {
                return true
            }
        };
        margins = {
            top: 30,
            bottom: 30,
            left: 30,
            width: '100%'
            //color: '#000'
        };

        pdf.addHTML()(
        source, // HTML string or DOM elem ref.
        margins.left, // x coord
        margins.top, { // y coord
        'width': margins.width, // max width …
Run Code Online (Sandbox Code Playgroud)

javascript php codeigniter html2canvas jspdf

1
推荐指数
1
解决办法
7419
查看次数

jsPDF addHTML方法无法使用没有错误消息

我正在使用jsPdf官方演示站点的示例来测试新的addHTML函数,稍加改动就可以直接保存生成的PDF.

console.log("testing");
var pdf = new jsPDF('p','pt','a4');
pdf.addHTML(document.body,function() {
    console.log("started");
    pdf.save()
    console.log("finished");
});
console.log("testing again");
Run Code Online (Sandbox Code Playgroud)

当我运行上面的脚本时,它不会生成任何错误消息,但也不会生成PDF.在控制台中,只显示"测试"和"再次测试",所以我猜这个脚本没有运行.

我错过了什么?我正在使用bootstrap选项卡功能和一些使用highchart生成的图表.处理jsPDF太复杂了吗?

javascript highcharts twitter-bootstrap jspdf

1
推荐指数
2
解决办法
7639
查看次数

排除jsPDF AutoTable中的列

有经验的人使用jsPDF autoTable从表中排除pdf结果中的列。会有所帮助。

javascript jquery jspdf jspdf-autotable

1
推荐指数
1
解决办法
1841
查看次数

如何在html2canvas中隐藏div

大家好我正在使用jsPDF以及html2canvas.我已经看到add.HTML你可以隐藏一些div.是否有可能在html2canvas中具备此功能.

我实际上正在制作一个pdf,但我想要一些主要div的div不要在pdf中打印.

这是我的html2canvas代码.

html2canvas(quotes, {
    onrendered: function(canvas) {

        //! MAKE YOUR PDF
        var pdf = new jsPDF('p', 'pt', 'A4');
        for (var i = 0; i <= quotes.clientHeight/980; i++) {
            //! This is all just html2canvas stuff
            var srcImg  = canvas;
            var sX      = 0;
            var sY      = 980*i; // start 980 pixels down for every new page
            var sWidth  = 900;
            var sHeight = 980;
            var dX      = 0;
            var dY      = 0;
            var dWidth  = 900;
            var …
Run Code Online (Sandbox Code Playgroud)

html javascript canvas html2canvas jspdf

1
推荐指数
1
解决办法
1622
查看次数

如何在jspdf中更改线条颜色?

如何改变使用line(x1, y1, x2, y2)方法生成的线条颜色?

javascript jspdf

1
推荐指数
1
解决办法
4126
查看次数

使用jspdf将数组导出为表格

我的数据格式如下。

[
    {"Company":"XYZ1", "FName":"John", "LName": "Deere", "ID": 1234}, 
    {"Company":"XYZ2", "FName":"Jack", "LName": "Jones", "ID": 2345},
    {"Company":"XYZ3", "FName":"James", "LName": "Lebron", "ID": 3456}
]
Run Code Online (Sandbox Code Playgroud)

有没有一种方法可以将2个不同表中的相同数据导出到PDF文件中?我正在使用Angular 4和jsPDF包。

表格1

**Company**    **FName**
  XYZ1            John
  XYZ2            Jack
  XYZ3            James
Run Code Online (Sandbox Code Playgroud)

表:2

**LName**    **ID**
  Deere        1234
  Jones        2345
  Lebron       3456
Run Code Online (Sandbox Code Playgroud)

html javascript jspdf angular

1
推荐指数
1
解决办法
3701
查看次数