我有以下html代码:

<!DOCTYPE html>
<html>
    <body>
        <p>don't print this to pdf</p>
        <div id="pdf">
            <p><font size="3" color="red">print this to pdf</font></p>
        </div>
    </body>
</html>

所有我想做的是打印到pdf,无论在div中找到一个id为“pdf”。这必须使用JavaScript来完成。"pdf"文件会自动下载,文件名为"foobar.pdf"

我一直在使用jspdf来做到这一点,但它唯一的功能是“文本”,只接受字符串值。我想提交HTML到jspdf,而不是文本。


当前回答

如果你需要下载一个特定页面的PDF文件,只需添加这样的按钮

<h4 onclick="window.print();"> Print </h4>

使用window.print()打印整个页面,而不仅仅是一个div

其他回答

这个例子效果很好。

<button onclick="genPDF()">Generate PDF</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script>
    function genPDF() {
        var doc = new jsPDF();
        doc.text(20, 20, 'Hello world!');
        doc.text(20, 30, 'This is client-side Javascript, pumping out a PDF.');
        doc.addPage();
        doc.text(20, 20, 'Do you like that?');
    
        doc.save('Test.pdf');
    }
</script>

不满意html2canvas的渲染和缺乏现代CSS3/JS和打印特定的CSS支持pdfMake的过时版本的WebKit…

这是一个理论上的解决方案,它是无头的,可以忠实地渲染页面,支持分页符,页边距,不同的页面大小,并且可以自动化。你甚至可以把WebGl渲染成PDF。

Chrome有一个devtools协议…它有printtoPDF函数 摘录:https://gitlab.com/-/snippets/new 官方20k-SLOC规范:https://github.com/ChromeDevTools/devtools-protocol/blob/master/json/browser_protocol.json 你可以使用节点和https://github.com/GoogleChrome/chrome-launcher运行chrome无头…等待它渲染。 利润

在chrome_devtools协议上执行printToPDF命令:

printToPDF({
  printBackground: false,
  pageWidth: 8.5,
  pageHeight: 11,
  transferMode: "ReturnAsStream" // or ReturnAsBase64
})

2022答:

从HTML元素生成PDF并提示保存文件:

import { jsPDF } from "jsPDF"

function generatePDF() {
  const doc = new jsPDF({ unit: 'pt' }) // create jsPDF object
  const pdfElement = document.getElementById('pdf') // HTML element to be converted to PDF

  doc.html(pdfElement, {
    callback: (pdf) => {
      pdf.save('MyPdfFile.pdf')
    },
    margin: 32, // optional: page margin
    // optional: other HTMLOptions
  })
}
<button onclick="generatePDF()">Save PDF</button>

...

不打印预览PDF文件:

doc.html(pdfElement, {
  callback: (pdf) => {
    const myPdfData = pdf.output('datauristring')
  }
})
<embed type="application/pdf" src={myPdfData} />

... 更多的html: https://github.com/parallax/jsPDF/blob/master/types/index.d.ts

我能够得到jsPDF打印动态创建的表从一个div。

$(document).ready(function() {

        $("#pdfDiv").click(function() {

    var pdf = new jsPDF('p','pt','letter');
    var specialElementHandlers = {
    '#rentalListCan': function (element, renderer) {
        return true;
        }
    };

    pdf.addHTML($('#rentalListCan').first(), function() {
        pdf.save("caravan.pdf");
    });
    });
});

工作伟大的Chrome和Firefox…格式在IE中都被放大了。

我还列出了以下内容:

<script src="js/jspdf.js"></script>
    <script src="js/jspdf.plugin.from_html.js"></script>
    <script src="js/jspdf.plugin.addhtml.js"></script>
    <script src="//mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
    <script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
    <script type="text/javascript" src="./libs/FileSaver.js/FileSaver.js"></script>
    <script type="text/javascript" src="./libs/Blob.js/Blob.js"></script>
    <script type="text/javascript" src="./libs/deflate.js"></script>
    <script type="text/javascript" src="./libs/adler32cs.js/adler32cs.js"></script>

    <script type="text/javascript" src="js/jspdf.plugin.addimage.js"></script>
    <script type="text/javascript" src="js/jspdf.plugin.sillysvgrenderer.js"></script>
    <script type="text/javascript" src="js/jspdf.plugin.split_text_to_size.js"></script>
    <script type="text/javascript" src="js/jspdf.plugin.standard_fonts_metrics.js"></script>

下面的方法对我的案例很有效。

隐藏页面的其他部分,如下例所示

@media print{
    body{
        -webkit-print-color-adjust: exact; // if you want to enable graphics
        color-adjust: exact !important; // if you want to enable graphics
        print-color-adjust: exact !important; // if you want to enable graphics
       
        * {
            visibility: hidden;
            margin:0;
            padding:0
        }
        .print_area, .print_area *{
            visibility: visible;
        }
        .print_area{
            margin: 0;
            align: center;
        }
        .pageBreak { 
           page-break-before : always; // If you want to skip next page
           page-break-inside: avoid;  // If you want to skip next page
         }
      }
    @page {
        size: A4; margin:0mm; // set page layout
        background-color: #fff;
    }
}

使用javascript的print函数来打印执行。

<button onclick="window.print()">Print</button>