jsPDF使用技巧

時間 2019-12-13

標籤 jspdf 使用技巧简体版

原文原文鏈接

正經常使用法php

引入jspdf.min.jscss

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

api可查看官方說明 jsPDFhtml

根據不一樣需求，使用中並無想象中那麼容易。git

問題1：輸入中文時，生成的pdf內容變成亂碼github

解決方法：canvas

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

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-supportjsp

問題2：如何給文字添加超連接ide

解決方法：函數

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:eq(0) .cut-box').length;
        // var resultBoxLength = 1;
        var resultBoxIndex = 0;        
        var progressIndex = 0;
        var pdf = new jsPDF('', 'pt', 'a4');

        html2canvas(
            $('.containte_edit'),
                {
                    dpi: 172,//導出pdf清晰度
                    height:$('.containte_edit').offset().top+$('.containte_edit').innerHeight(),
                    onrendered: function (canvas) {
                        var contentWidth = canvas.width;
                        var contentHeight = canvas.height;
                        var imgWidth = 555.28;
                        var imgHeight = 555.28 / contentWidth * contentHeight;

                        var pageData = canvas.toDataURL('image/jpeg', 1.0);
                        pdf.addFont('NotoSansCJKjp-Regular.ttf', 'NotoSansCJKjp', 'normal');
                        pdf.setFont('NotoSansCJKjp');
                        pdf.addImage(pageData, 'JPEG', 20, 20, imgWidth, imgHeight);
                        pdf.textWithLink('導導導導導導導導導', 30, 40, { url: '<?php echo $host;?>' });
                        pdf.textWithLink('導導導導', 500, 40, { url: '<?php echo base_url('testing/downLoadFile/'.$proj_num);?>' });
                        $('.export-pdf').css('display','inline-block');
                        setProgress(progressIndex);
                        newHtmlCanvas(pdf,resultBoxIndex,progressIndex);
                    },
                    //背景設爲白色（默認爲黑色）
                    background: "#fff",
                    useCORS:true
                })
    })
    //pdf 要輸入的pdf，boxLength循環長度，h當前截取的位置
    function newHtmlCanvas(pdf,resultBoxIndex,progressIndex){
        console.log('resultBoxIndex:'+resultBoxIndex);
        console.log($('.result-box:eq('+resultBoxIndex+') .cut-box:eq(0)').offset().top)
        var cutBoxLen = $('.result-box:eq('+resultBoxIndex+') .cut-box').length;
        var cutBoxIndex = 1;
        if(resultBoxIndex!=0){
            pdf.addPage();
        }
        var firstSub = 0;
        if(resultBoxIndex==0){
            firstSub = 120;
        }
        html2canvas(
            $('.result-box:eq('+resultBoxIndex+')'),
            {
                dpi: 172,//導出pdf清晰度
                height:$('.result-box:eq('+resultBoxIndex+') .cut-box:eq(0)').offset().top+$('.result-box:eq('+resultBoxIndex+') .cut-box:eq(0)').innerHeight()-firstSub,
                onrendered: function (canvas) {
                    var contentWidth = canvas.width;
                    var contentHeight = canvas.height;

                    //一頁pdf顯示html頁面生成的canvas高度;
                    var pageHeight = contentWidth / 592.28 * 841.89;
                    // if(pageHeight>2000){
                    //     pageHeight = 2000
                    // }
                    //未生成pdf的html頁面高度
                    var leftHeight = contentHeight;
                    //pdf頁面偏移
                    var position = 20;
                    //html頁面生成的canvas在pdf中圖片的寬高（a4紙的尺寸[595.28,841.89]）
                    var imgWidth = 555.28;
                    var imgHeight = 555.28 / contentWidth * contentHeight;

                    var pageData = canvas.toDataURL('image/jpeg', 1.0);
                    //有兩個高度須要區分，一個是html頁面的實際高度，和生成pdf的頁面高度(841.89)
                    //當內容未超過pdf一頁顯示的範圍，無需分頁
                    if(resultBoxIndex==0){
                        position=80;
                        // pageHeight = pageHeight -position;
                    }
                    if (leftHeight < pageHeight) {
                        pdf.addImage(pageData, 'JPEG', 20, 20, imgWidth, imgHeight);
                    } else {
                        while (leftHeight > 0) {
                            pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
                            leftHeight -= pageHeight;
                            position -= 841.89;
                            //避免添加空白頁
                            if (leftHeight > 0) {
                                pdf.addPage();
                            }
                        }
                    }
                    if(cutBoxLen>cutBoxIndex){
                        console.log('有1個以上的子cut-box');
                        $('.result-box:eq('+resultBoxIndex+') .cut-box:eq('+(cutBoxIndex-1)+')').css('display','none');
                        $('.result-box:eq('+resultBoxIndex+') .cut-box:eq('+(cutBoxIndex)+')').css('display','inline-block');
                        pdf.addPage();
                        progressIndex++;
                        setProgress(progressIndex);
                        connectHtmlCanvas(pdf,resultBoxIndex,cutBoxLen,cutBoxIndex,progressIndex);
                    }else{
                        console.log('只有1個子cut-box');
                        if(resultBoxIndex==resultBoxLength-1){
                            console.log('當前爲最後一個resultbox');
                            console.log('endPage')
                            pdf.save('content.pdf');
                            $("#pdfContent").removeClass('exporting');
                            $('.containte_edit .export-pdf span').html('生成PDF');
                            $('.result-box').show();
                            $('.result-box .cut-box').show();
                            $('body').css({'height':'auto','overflow':'auto'});
                            exporting = false;
                            setProgress(0);
                        }else{
                            console.log('addPage');
                            console.log('當前不是最後一個resultbox');
                            pdf.addPage();
                            $('.result-box:eq('+(resultBoxIndex+1)+')').show().siblings('.result-box').hide();
                            resultBoxIndex++;
                            progressIndex++;
                            setProgress(progressIndex);
                            newHtmlCanvas(pdf,resultBoxIndex,progressIndex);
                        }
                    }
                },
                //背景設爲白色（默認爲黑色）
                background: "#fff",
                useCORS:true
            }
        )
    }
    function connectHtmlCanvas(pdf,resultBoxIndex,cutBoxLen,cutBoxIndex,progressIndex){
        console.log('cutBoxLen:'+cutBoxLen+'cutBoxIndex:'+cutBoxIndex);
        html2canvas(
            $('.result-box:eq('+resultBoxIndex+') .cut-box:eq('+cutBoxIndex+')'),
            {
                dpi: 172,//導出pdf清晰度
                onrendered: function (canvas) {
                    var contentWidth = canvas.width;
                    var contentHeight = canvas.height;

                    //一頁pdf顯示html頁面生成的canvas高度;
                    var pageHeight = contentWidth / 592.28 * 841.89;
                    // if(pageHeight>2000){
                    //     pageHeight = 2000
                    // }
                    //未生成pdf的html頁面高度
                    var leftHeight = contentHeight;
                    //pdf頁面偏移
                    var position = 20;
                    //html頁面生成的canvas在pdf中圖片的寬高（a4紙的尺寸[595.28,841.89]）
                    var imgWidth = 555.28;
                    var imgHeight = 555.28 / contentWidth * contentHeight;

                    var pageData = canvas.toDataURL('image/jpeg', 1.0);
                    //有兩個高度須要區分，一個是html頁面的實際高度，和生成pdf的頁面高度(841.89)
                    //當內容未超過pdf一頁顯示的範圍，無需分頁
                    if (leftHeight < pageHeight) {
                        pdf.addImage(pageData, 'JPEG', 20, 30, imgWidth, imgHeight);
                    } else {
                        while (leftHeight > 0) {
                            pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
                            leftHeight -= pageHeight;
                            position -= 841.89;
                            //避免添加空白頁
                            if (leftHeight > 0) {
                                pdf.addPage();
                            }
                        }
                    }
                    if(cutBoxIndex==cutBoxLen-1){
                        console.log('當前爲父div裏最後一個cut-box');
                        if(resultBoxIndex==resultBoxLength-1){
                            console.log('當前爲最後一個result-box');
                            pdf.save('content.pdf');
                            $("#pdfContent").removeClass('exporting');
                            $('.containte_edit .export-pdf span').html('生成PDF');
                            $('body').css({'height':'auto','overflow':'auto'});
                            $('.result-box').show();
                            $('.result-box .cut-box').show();
                            exporting = false;
                            setProgress(0);
                        }else{
                            console.log('當前不是最後一個result-box');
                            $('.result-box:eq('+(resultBoxIndex+1)+')').show().siblings('.result-box').hide();
                            resultBoxIndex++;
                            progressIndex++;
                            setProgress(progressIndex);
                            newHtmlCanvas(pdf,resultBoxIndex,progressIndex);
                        }
                    }else{
                        console.log('當前不是父div裏最後一個cut-box');
                        $('.result-box:eq('+resultBoxIndex+') .cut-box:eq('+cutBoxIndex+')').css('display','none');
                        $('.result-box:eq('+resultBoxIndex+') .cut-box:eq('+(cutBoxIndex+1)+')').css('display','inline-block');
                        cutBoxIndex++;
                        pdf.addPage();
                        progressIndex++;
                        setProgress(progressIndex);
                        connectHtmlCanvas(pdf,resultBoxIndex,cutBoxLen,cutBoxIndex,progressIndex)
                    }
                },
                //背景設爲白色（默認爲黑色）
                background: "#fff",
                useCORS:true
            }
        )
    }
    // 設置進度條
    function setProgress(progressIndex){
        var progress = Math.round((progressIndex/progressLen)*100) +'%';
        $('.containte_edit .export-pdf i').css('width',progress);
    }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。