博客

正常用法

引入jspdf.min.js

var doc = new jsPDF()
doc.text('Hello world!', 10, 10)
doc.save('a4.pdf')

api可查看官方说明

jsPDF

根据不同需求，使用中并没有想象中那么容易。

问题1：输入中文时，生成的pdf内容变成乱码

解决方法：

引入jspdf.customfonts.min.js 和 default_vfs.js

var doc = new jsPDF();

doc.addFont('NotoSansCJKjp-Regular.ttf', 'NotoSansCJKjp', 'normal');

doc.setFont('NotoSansCJKjp');
doc.text(15, 30, 'こんにちは。はじめまして。');

//multi-lines Test
var paragraph = '相次いで廃止された寝台列車に代わり、いまや夜間の移動手段として主力になりつつある夜行バス。「安い」「寝ながら移動できる」などのメリットを生かすため、運行ダイヤはどのように組まれているのでしょうか。夜遅く出て、朝早く着くというメリット夜行バスを使うメリットといえば、各種アンケートでもいちばん多い回答の「安い」以外に、';
var lines = doc.splitTextToSize(paragraph, 150);
doc.text(15, 60, lines);

doc.save('custom_fonts.pdf');

参考

jsPDF-CustomFonts-support

问题2：如何给文字添加超链接

解决方法：

pdf.textWithLink('下载', 30, 40, { url: 'https://www.google.com/' });

问题3：导出后的pdf黑黑的一片

解决方法：

由于html内容过长，图片较多较长的时候。jsPDF无法导出，可以对页面进行分步截取，然后进行拼接，还可以进行更好的分页

pdf.addPage();

问题4：分步导出后的pdf还是黑黑的一片

解决方法：

导出PDF时，先只显示第一步需要导出的内容，导出完毕后，隐藏导出的页面内容，显示下一步需要导出的页面内容。

以下为部分函数源码，可作为参考

var exporting = false;
    var progressLen = $('.cut-box').length;
    var resultBoxLength = $('.result-box').length;
    $('.export-pdf').click(function(){
        if(exporting){
            return false;
        }
        exporting = true;
        console.log('export-pdf')
        // 保存时先显示所有测试图片，隐藏按钮
        var imglen = $('img.lazy').length;
        for(var i=0;i<imglen;i++){
            console.log($('img.lazy:eq('+i+')').attr('data-original'))
            $('img.lazy:eq('+i+')').attr('src',$('img.lazy:eq('+i+')').attr('data-original'))
        }
        // return;
        $("#pdfContent").addClass('exporting');
        $('.containte_edit .export-pdf span').html('生成中...');
        $('.export-pdf').css('display','none');
        $('body').css({'height':'100%','overflow':'hidden'});
        var firstResultLen = $('.result-box:e