未将特殊字符导出到PDF

Question

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

请找到演示插页：https://plnkr.co/edit/BCgDQm3jV9ctwYJMWkjh?p=preview

在上面的演示柱塞中，当用户单击导出按钮时，内容将导出到PDF并下载PDF，但问题是我注意到特殊字符没有导出到PDF。在网页上可以看到的option1，option2提到的项目符号和数字不会导出到PDF。

JavaScript代码：

$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);
    });
}

任何输入都会很有帮助。

Answer 1

根据文档，doc.addHTML正在被弃用，取而代之的是可向量的应用编程接口。这种方法似乎确实缺少一些功能，比如CSS list-style-type的渲染。

我不确定doc.fromHTML是否是这个新的API (目前在文档中还没有)，但它似乎能够呈现以下内容：

​

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。

Answer 2

当我读到你在github中使用的插件时，你可能需要使用UTF-8字符集来完成它。您可以尝试在head html上添加meta charset UTF-8，这将用于生成PDF

或者如果您使用nodeJS作为后端。你可以试试phantom JS PDF。我以前确实用过它，它甚至支持阿拉伯、中文、俄语、日语等符号语言(有一些配置)。

为提高可读性而进行编辑