使用Javascript从div中的HTML生成pdf

一种方法是使用 window.print() 函数。不需要任何库

优点

1.无需外部库。

2.我们也可以只打印身体的选定部位。

3.没有css冲突和js问题。

4.核心html/js功能

---只需添加以下代码

CSS 到

@media print {
        body * {
            visibility: hidden; // part to hide at the time of print
            -webkit-print-color-adjust: exact !important; // not necessary use         
               if colors not visible
        }

        #printBtn {
            visibility: hidden !important; // To hide 
        }

        #page-wrapper * {
            visibility: visible; // Print only required part
            text-align: left;
            -webkit-print-color-adjust: exact !important;
        }
    }

JS 代码 - 在 btn 点击时调用 bewlow 函数

$scope.printWindow = function () {
  window.print()
}

注意：在每个 css 对象中使用 !important

例子 -

.legend  {
  background: #9DD2E2 !important;
}

使用 pdfMake.js 和 this Gist。

（我找到了 Gist here 以及包 html-to-pdfmake 的链接，我最终暂时没有使用它。）

在 npm install pdfmake 并将 Gist 保存在 htmlToPdf.js 之后，我像这样使用它：

const pdfMakeX = require('pdfmake/build/pdfmake.js');
const pdfFontsX = require('pdfmake-unicode/dist/pdfmake-unicode.js');
pdfMakeX.vfs = pdfFontsX.pdfMake.vfs;
import * as pdfMake from 'pdfmake/build/pdfmake';
import htmlToPdf from './htmlToPdf.js';

var docDef = htmlToPdf(`<b>Sample</b>`);
pdfMake.createPdf({content:docDef}).download('sample.pdf');

评论：

我的用例是从 Markdown 文档（使用 markdown-it）创建相关的 html，然后生成 pdf，并上传其二进制内容（我可以使用 pdfMake 的 getBuffer() 函数获取），所有这些都来自浏览器。对于这种 html，生成的 pdf 比我尝试过的其他解决方案更好。

我对接受的答案中建议的从 jsPDF.fromHTML() 得到的结果不满意，因为该解决方案很容易被我的 HTML 中的特殊字符混淆，这些字符显然被解释为一种标记并完全弄乱了生成的 PDF。

使用基于画布的解决方案（如已弃用的 jsPDF.from_html() 函数，不要与接受的答案中的那个混淆）对我来说不是一种选择，因为我希望生成的 PDF 中的文本是可粘贴的，而基于画布的解决方案生成基于位图的 PDF。

像 md-to-pdf 这样的 pdf 转换器的直接降价仅适用于服务器端，对我不起作用。

使用浏览器的打印功能对我不起作用，因为我不想显示生成的 PDF 而是上传其二进制内容。

我能够让 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>

如果要导出表格，可以查看 Shield UI Grid 小部件提供的 this export sample。

这是通过像这样扩展配置来完成的：

...
exportOptions: {
    proxy: "/filesaver/save",
    pdf: {
        fileName: "shieldui-export",
        author: "John Smith",
        dataSource: {
            data: gridData
        },
        readDataSource: true,
        header: {
            cells: [
                { field: "id", title: "ID", width: 50 },
                { field: "name", title: "Person Name", width: 100 },
                { field: "company", title: "Company Name", width: 100 },
                { field: "email", title: "Email Address" }
            ]
        }
    }
}
...

这个例子很好用。

<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 和打印 pdfMake 过时版本的 WebKit 的特定 CSS 支持...

这是一个理论上的解决方案，它是无头的，可以忠实地呈现页面，支持分页符、页边距、不同的页面大小并且可以自动化。您甚至可以将 WebGl 呈现为 PDF。

Chrome 有一个 devtools 协议......它有一个 printtoPDF 功能 摘录：https://gitlab.com/-/snippets/new 官方 20k-SLOC 规范：https://github.com/ChromeDevTools/devtools-protocol/blob/主/json/browser_protocol.json

摘录：https://gitlab.com/-/snippets/new

官方 20k-SLOC 规范：https://github.com/ChromeDevTools/devtools-protocol/blob/master/json/browser_protocol.json

您可以使用 node 和 https://github.com/GoogleChrome/chrome-launcher 来运行 chrome headless ... 等待它呈现。

利润

您将在 chrome_devtools 协议上运行的 printToPDF 命令：

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

要将 div 捕获为 PDF，您可以使用 https://grabz.it 解决方案。它有一个简单灵活的 JavaScript API，允许您捕获单个 HTML 元素的内容，例如 div 或 span

为了实现它，您首先需要获得 app key and secret 和 download（免费）SDK。

现在举个例子。

假设您有 HTML：

<div id="features">
    <h4>Acme Camera</h4>
    <label>Price</label>$399<br />
    <label>Rating</label>4.5 out of 5
</div>
<p>Cras ut velit sed purus porttitor aliquam. Nulla tristique magna ac libero tempor, ac vestibulum felisvulput ate. Nam ut velit eget
risus porttitor tristique at ac diam. Sed nisi risus, rutrum a metus suscipit, euismod tristique nulla. Etiam venenatis rutrum risus at
blandit. In hac habitasse platea dictumst. Suspendisse potenti. Phasellus eget vehicula felis.</p>

要捕获功能 ID 下的内容，您需要：

//add the sdk
<script type="text/javascript" src="grabzit.min.js"></script>
<script type="text/javascript">
//login with your key and secret. 
GrabzIt("KEY", "SECRET").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "format": "pdf"}).Create();
</script>

请注意target: #feature。 #feature 是您的 CSS 选择器，就像在前面的示例中一样。现在，当页面加载时，现在将在与 script 标签相同的位置创建图像屏幕截图，其中将包含 features div 的所有内容，仅此而已。

您可以对 div-screenshot 机制进行其他配置和自定义，请查看here

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('datauri')
  }
})

<embed type="application/pdf" src={myPdfData} />

...
更多 HTML 选项：
https://github.com/parallax/jsPDF/blob/master/types/index.d.ts

任何人都试试这个

    (function () {  
        var  
         form = $('.form'),  
         cache_width = form.width(),  
         a4 = [595.28, 841.89]; // for a4 size paper width and height  

        $('#create_pdf').on('click', function () {  
            $('body').scrollTop(0);  
            createPDF();  
        });  
        //create pdf  
        function createPDF() {  
            getCanvas().then(function (canvas) {  
                var  
                 img = canvas.toDataURL("image/png"),  
                 doc = new jsPDF({  
                     unit: 'px',  
                     format: 'a4'  
                 });  
                doc.addImage(img, 'JPEG', 20, 20);  
                doc.save('Bhavdip-html-to-pdf.pdf');  
                form.width(cache_width);  
            });  
        }  

        // create canvas object  
        function getCanvas() {  
            form.width((a4[0] * 1.33333) - 80).css('max-width', 'none');  
            return html2canvas(form, {  
                imageTimeout: 2000,  
                removeContainer: true  
            });  
        }  

    }());