web-dev-qa-db-ja.com

jsPDFはスタイリングが機能しません

私はjsPDFを使用するのは初めてですが、私の人生のために、この事に適用するCSSを取得することはできません！インライン、内部、外部のすべてを試してみましたが、役に立ちませんでした！別のSOを読んでください。技術的にはファイルに印刷するので、印刷スタイルシートが必要で、それも機能しませんでした。

私は非常に基本的なページを持っているので、CSSを動作させようとしています：JS：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jspdf.js"></script>
<script type="text/javascript" src="./libs/FileSaver.js/FileSaver.js"></script>
<script type="text/javascript" src="./libs/Blob.js/BlobBuilder.js"></script>
<script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script> 
<script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>               
<script type="text/javascript" src="jspdf.plugin.from_html.js"></script>
<script>
    $(document).ready(function(){
        $('#dl').click(function(){
        var specialElementHandlers = {
            '#editor': function(element, renderer){
                return true;
            }
        };
        var doc = new jsPDF('landscape');
        doc.fromHTML($('body').get(0), 15, 15, {'width': 170,   'elementHandlers': specialElementHandlers});
        doc.output('save');
        });
    });
</script>

HTML：

<body>
    <div id="dl">Download Maybe?</div>
    <div id="testcase">
        <h1>  
            We support special element handlers. Register them with jQuery-style 
        </h1>
    </div>
</body>

そして最後に、外部のスタイルシート：

h1{
    color: red;
}
div{
    color: red;
}

すべてが正しくインクルードされており、エラーがないことを確認しています。すでにすべてをチェックしています。 cssを動作させるために呼び出す必要のある追加の関数のようなものはありますか？私に教えてください！どうもありがとう！あなたが持つかもしれない他のヒントも大歓迎です！

編集：これは正確なウェブページです：

<html>
    <head>
        <link rel="stylesheet" href="print.css" type="text/css" media="print"/>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="jspdf.js"></script>
        <script type="text/javascript" src="./libs/FileSaver.js/FileSaver.js"></script>
        <script type="text/javascript" src="./libs/Blob.js/BlobBuilder.js"></script>
        <script type="text/javascript" src="jspdf.plugin.standard_fonts_metrics.js"></script>
        <script type="text/javascript" src="jspdf.plugin.split_text_to_size.js"></script>               
        <script type="text/javascript" src="jspdf.plugin.from_html.js"></script>
        <script>
            $(document).ready(function(){
                $('#dl').click(function(){
                var specialElementHandlers = {
                    '#editor': function(element, renderer){
                        return true;
                    }
                };
                var doc = new jsPDF('landscape');
                doc.fromHTML($('body').get(0), 15, 15, {'width': 170,   'elementHandlers': specialElementHandlers});
                doc.output('save');
                });
            });
        </script>
    </head>
    <body>
        <div id="dl">Download Maybe?</div>
        <div id="testcase">
            <h1>  
                We support special element handlers. Register them with jQuery-style 
            </h1>
        </div>
    </body>
</html>
javascriptcsspdf-generationjspdf
35
samuraiseoul

問題は、_media="print"_ではなく_media="screen"_を使用していることだと思います。印刷用と画面用の2つのファイルを作成してみてください。

_<link rel="stylesheet" href="print.css" type="text/css" media="print"/>
<link rel="stylesheet" href="screen.css" type="text/css" media="screen"/>
_

画面1には、ブラウザーで表示されるページのスタイルが含まれます。印刷するものには、ページを印刷するとき、またはこの場合はPDFとして保存するときのスタイルが含まれます。

[〜＃〜] edit [〜＃〜]

jsPDF website を確認しましたが、CSSをサポートしていないと思います。ただし、次のような操作を行って、異なるテキスト色のドキュメントを作成できます。

_doc.setFontSize(22);
doc.setTextColor(255, 0, 0);
doc.text(20, 20, 'This is a title');

doc.setFontSize(16);
doc.setTextColor(0, 255, 0);
doc.text(20, 30, 'This is some normal sized text underneath.');
_

このコードをスクリプトのvar doc = new jsPDF('landscape');の直下に配置します。

23
Jarno

jsPDF、html2canvas、およびhtml2pdfライブラリを使用する this オプションを試すことができます

rEADMEから：

このファイルを含めます：

<script src="jspdf.min.js"></script>
<script src="html2canvas.min.js"></script>
<script src="html2pdf.js"></script>

次に、次を実行してPDFを生成できます。

html2pdf($('body').get(0), {
   margin:       1,
   filename:     'myfile.pdf',
   image:        { type: 'jpeg', quality: 0.98 },
   html2canvas:  { dpi: 192, letterRendering: true },
   jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
});
1
drizzt13

@samuraiseoul domtoimage で複雑なHTMLレンダリングを行うことができます

private async generatePDF(elemToPrint: HTMLElement): Promise<void> {
 this.printSection = document.createElement('div');
 this.printSection.id = 'printSection';
 document.body.appendChild(this.printSection);
 const dataUrl = await domtoimage.toPng(elemToPrint, {width: elemToPrint.clientWidth, height: elemToPrint.clientHeight});
 const img = document.createElement('img');
 img.src = dataUrl;
 img.alt = 'The Image';
 this.printSection.appendChild(img);
 setTimeout(() => window.print(), 500); //Just give some time to render stuff while playing with @media print css stuff  
}

これがCSSです

@media screen {
 #printSection { 
  display: none;
 }
}
@media print {
  #printSection , #printSection *{
   display: block; // We need the * because only if we display all the items inside the printSection to display as block. then only our mighty firefox will render the second page. :) Hey, that's a bug from FF.
  }
}
0
Fasid Mpm

JsPDFでスクリーンショットをキャプチャできますが、html2canvasも必要です。 html2canvasを使用して、htmlをキャンバスに変換し、画像コンテンツを取得します。 jsPDFで空のpdfを作成し、pdfにhtml画像コンテンツを追加して保存します。

html2canvas(*html*, {
  onrendered: function(canvas) {
    const contentDataURL = canvas.toDataURL('image/png')
    let pdf = new jsPDF()
    pdf.addImage(contentDataURL, 'JPEG', 20, 20)
    pdf.save('form.pdf')
  }
})

これにより、すべてのCSSが保持されますが、品質は少し低下します（ぼやけた）。

0
flashmatrix