2017-10-30 14 views
0

に輸出されていません。データをPDFにエクスポートすると、特殊文字はPDFに表示されません。特殊文字は、私はPDFにデータをエクスポートするjspdfを使用していますPDF

デモplunker見つけてください:輸出ユーザーがボタンをクリックし、コンテンツはPDFおよびPDFにエクスポートされたがダウンロードされますが、問題は特殊文字がエクスポートされていない私に気づいているとき、上記のデモplunkerでhttps://plnkr.co/edit/BCgDQm3jV9ctwYJMWkjh?p=preview

をPDFにoption1、option2のWebページに表示される箇条書きと数字は、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); 
    }); 
} 

任意の入力が参考になります。私はあなたがgithubで使用したプラグインで読んでいたよう

+0

私はこれらをエクスポートする方法がわからないが、それはそれ自体の文字はありませんが、[CSSエンティティ](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-タイプ)。これはDOMの一部ではありません。 – Kaiido

+0

そのデータはsummernoteエディタを使用して生成されます。 jsPDFがそれらを認識するための方法はありますか?jsPDFがデータをPDFにエクスポートするための適切なAPIであるかどうか、または使用するためのより良いAPIはありますか?そのJavaアプリケーションと私はangularjsとjQueryを使用しています。コンテンツは、夏のノートエディタによって生成される。@ Kaiido – user8838953

答えて

0

あなたがそれを行うにはUTF-8文字セットを必要とするかもしれないことが表示されます。あなたは、バックエンドとしてnodeJSを使用している場合、PDF

かを生成するためにあなたがそれを使用しますです、あなたの頭のHTMLにメタ文字セットUTF-8を追加しようとすることができます。 phantom JS PDFを試すことができます。私は前にそれを使用したのと、アラビア中国語、ロシア語、日本語、(いくつかの構成を持つ)以上のようなそのさえサポート記号言語は

ドキュメントによると、読みやすく

1

のために編集され、doc.addHTMLはの賛成で廃止される予定ですベクター対応API この方法は、確かに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

+0

任意のCSSデータをPDFにエクスポートされた後、PDFで強調表示されたテキストを表示するハック。 https://plnkr.co/edit/GaHLv9SQFwdnzbwZh2y9?p=preview。強調表示された黄色は生成されたPDFには表示されません。 .assHTML()を使用して実装した場合も同じですhttps://plnkr.co/edit/LKuwzk5Dt0kdQfMkMfxH?p=preview、強調表示されたテキストは表示されますが、箇条書きと番号付きのオプションは表示されず、生成されたPDFは明確ではありません.. @ kaiido – user8838953

関連する問題