特殊字符未导出到PDF [英] special characters are not being exported to PDF

问题描述

我正在使用jspdf将数据导出到PDF.将数据导出到PDF时，PDF中不会显示特殊字符.

I am using jspdf to export the data to PDF. When the data is exported to the PDF, special characters are not displayed in the PDF.

请找到演示插件: https://plnkr.co/edit/BCgDQm3jV9ctwYJMWkjh?p =预览

在上面的演示插件中，当用户单击导出"按钮时，内容被导出到PDF并下载了PDF，但问题是我注意到特殊字符未导出到PDF.在网页上可以看到的关于option1，option2的项目符号和编号未导出到PDF.

In the above demo plunker, when user click on export button, the content is exported to the PDF and PDF is downloaded but issue is i noticed special characters are not being exported to the PDF. The bullets and the numbers mentioned for option1,option2 which can be seen on webpage are not exported to the PDF.

JavaScript代码:

JavaScript code:

$scope.export = function() {
    var pdf = new jsPDF('landscape');
    var pdfName = 'test.pdf';

    var options = {};

    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.addHTML($('.myDivClass')[currentRecursion], 15, 20, options, function(){
                console.log(currentRecursion);
                recursiveAddHtmlAndSave(currentRecursion, totalRecursions)
            });
        }
    }

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

任何输入都会有所帮助.

Any inputs would be helpful.

推荐答案

根据文档， doc.addHTML ，而推荐使用支持矢量的API. 这种方法确实似乎缺少某些功能，例如 CSS list-style-type .

According to the docs, doc.addHTML is being deprecated in favor of a vector able API. This method indeed seems to lack some features, like the rendering of CSS list-style-type.

我不确定doc.fromHTML是否是这个新的API (当前在文档中不存在)，但它似乎能够呈现这些内容:

I am not sure if doc.fromHTML is this new API (currently absent from the docs), but it seems to be able to render these :

var doc = new jsPDF();
doc.fromHTML(ul, 15, 15, {
  width: 170
});
doc.addPage();
doc.fromHTML(ol, 15, 15, {
  width: 170
});
var blob = doc.output('blob');
var i = document.createElement('iframe');
i.width = '100%';
i.height = window.innerHeight;
i.src = URL.createObjectURL(blob);
var a = document.createElement('a');
a.download = 'doc.pdf';
a.innerHTML = 'download (for chrome...)';
a.href = i.src;
document.body.appendChild(a);
document.body.appendChild(i);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.debug.js"></script>

<div id="ul">
  <ul>
    <li>first</li>
    <li>second</li>
  </ul>
</div>
<div id="ol">
  <ol>
    <li>first</li>
    <li>second</li>
  </ol>
</div>

这是您的固定 plnkr .

这篇关于特殊字符未导出到PDF的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！