尝试修改 js 函数，使其提供与调用其他 js 函数时相同的输出

Question

我正在将网页上的内容导出到 PDF 文件，为此我使用了 jsPDF API，我可以让它工作，但现在我想使用 html2PDF，因为它解决了一些问题使用jsPDF时遇到API.

我编写了函数 $scope.exportUsingJSPDF，当单击按钮 Export Using JSPDF 时调用该函数。同样，我想实现使用 html2PDF API 但无法成功的函数 $scope.exportUsingHTML2PDF。关于如何修改 $scope.exportUsingHTML2PDF 以便它迭代 div 并显示 div 内容的任何输入，如通过单击使用 JSPDF 导出 [=31] 使用 $scope.exportUsingJSPDF 调用时所示=].

完整的在线示例：https://plnkr.co/edit/454HUFF3rmLlkXLCQkbx?p=preview

js代码：

    //trying to implement the below function same as $scope.exportUsingJSPDF, so
// that when user click on Export using HTML2PDF button, it exports the content to the PDF and generaes the PDF.
         $scope.exportUsingHTML2PDF = function(){
          var pdf = new jsPDF('l', 'pt', 'a4');
            var pdfName = 'test.pdf';

         pdf.canvas.height = 72 * 11;
         pdf.canvas.width = 72 * 8.5;
         html2pdf(document.getElementByClassName("myDivClass"), pdf, function(pdf){
             pdf.save(pdfName);
         });
         }

        $scope.exportUsingJSPDF = function() {
              var pdf = new jsPDF('p','pt','a4');
                var pdfName = 'test.pdf';

                var options = {   pagesplit: true};

                var $divs = $('.myDivClass')                //jQuery object of all the myDivClass divs
                var numRecursionsNeeded = $divs.length -1;     //the number of times we need to call addHtml (once per div)
                var currentRecursion=0;

                //Found a trick for using addHtml more than once per pdf. Call addHtml in the callback function of addHtml recursively.
                function recursiveAddHtmlAndSave(currentRecursion, totalRecursions){
                    //Once we have done all the divs save the pdf
                    if(currentRecursion==totalRecursions){
                        pdf.save(pdfName);
                    }else{
                        currentRecursion++;
                        pdf.addPage();
                        //$('.myDivClass')[currentRecursion] selects one of the divs out of the jquery collection as a html element
                        //addHtml requires an html element. Not a string like fromHtml.
                        pdf.fromHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
                            console.log(currentRecursion);
                            recursiveAddHtmlAndSave(currentRecursion, totalRecursions)
                        });
                    }
                }

                pdf.fromHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
                    recursiveAddHtmlAndSave(currentRecursion, numRecursionsNeeded);
                });
            }

PS：我试图修改 $scope.exportUsingHTML2PDF，以便它提供与单击调用函数 $scope.exportUsingJSPDF 的 "Export using JSPDF" 按钮时生成的输出相同的输出。

Answer 1

问题在于你的函数使用exportUsingHTML2PDF，错误是你需要将html传递给html2PDF的函数。根据您的需要管理页面 css。

编辑：你的库有误。请检查 plunker html2pdf.js 中的库

正在工作的 plunker： html2pdf

    $scope.exportUsingHTML2PDF = function() {
    var element = document.getElementById('element-to-print');
    html2pdf(element, {
        margin: 1,
        filename: 'myfile.pdf',
        image: {
            type: 'jpeg',
            quality: 0.98
        },
        html2canvas: {
            dpi: 192,
            letterRendering: true
        },
        jsPDF: {
            unit: 'in',
            format: 'letter',
            orientation: 'portrait'
        }
    });
}

Answer 2

使用 JSPDF 和 HTML2PDF，您必须习惯两种根本不同的编码风格：

JSPDF：命令式（javascript 语句）
HTML2PDF：声明式（指令嵌入 HTML）

因此对于分页符：

JSPDF: pdf.addPage();
HTML2PDF: <div class="html2pdf__page-break"></div>

应该工作，但是 HTML2PDF 有问题并且在包含 <div class="html2pdf__page-break"></div> 时给出 "Supplied data is not a JPEG" 错误（至少它是这样的对我来说，在 Plunkr 中），尽管 totally what the documentation tells us to do.

我没有时间调试它。你需要做一些研究。有人会在网络上的某个地方发布解决方案。

尝试修改 js 函数，使其提供与调用其他 js 函数时相同的输出

trying to modify the js function so that it gives the same output as it was when called the other js function

javascript

jquery

html2pdf

angularjs

jspdf