使用Javascript从div中的HTML生成pdf

2020/10/11 02:01 · javascript ·  · 0评论

我有以下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>

我要做的就是将div中ID为“ pdf”的任何内容打印为pdf。这必须使用JavaScript来完成。然后应使用文件名“ foobar.pdf”自动下载“ pdf”文档

我一直在使用jspdf来执行此操作,但是它唯一具有的功能是“文本”,它仅接受字符串值。我想将HTML提交给jspdf,而不是文本。

jsPDF可以使用插件。为了使其能够打印HTML,您必须包括某些插件,因此必须执行以下操作:

  1. 转到https://github.com/MrRio/jsPDF并下载最新版本。
  2. 在您的项目中包括以下脚本:

    • jspdf.js
    • jspdf.plugin.from_html.js
    • jspdf.plugin.split_text_to_size.js
    • jspdf.plugin.standard_fonts_metrics.js

如果要忽略某些元素,则必须用ID标记它们,然后可以在jsPDF的特殊元素处理程序中忽略该ID。因此,您的HTML应该如下所示:

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

然后,使用以下JavaScript代码在弹出窗口中打开创建的PDF:

var doc = new jsPDF();          
var elementHandler = {
  '#ignorePDF': function (element, renderer) {
    return true;
  }
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
    source,
    15,
    15,
    {
      'width': 180,'elementHandlers': elementHandler
    });

doc.output("dataurlnewwindow");

对我来说,这创建了一个漂亮整洁的PDF,其中仅包含“将其打印为pdf”行。

请注意,特殊元素处理程序仅处理当前版本中的ID,这在GitHub Issue中也有说明它指出:

因为匹配是针对节点树中的每个元素完成的,所以我希望使其尽可能快。在那种情况下,这意味着“仅元素ID匹配”。元素ID仍以jQuery样式“ #id”完成,但这并不意味着支持所有jQuery选择器。

因此,用类选择器(如“ .ignorePDF”)替换“ #ignorePDF”对我不起作用。相反,您将必须为每个元素添加相同的处理程序,您要忽略该元素,例如:

var elementHandler = {
  '#ignoreElement': function (element, renderer) {
    return true;
  },
  '#anotherIdToBeIgnored': function (element, renderer) {
    return true;
  }
};

示例中还可以看出,可以选择诸如“ a”或“ li”之类的标签。不过,对于大多数用例来说,这可能是无限制的:

我们支持特殊的元素处理程序。使用jQuery样式的ID选择器注册它们的ID或节点名称。(“ #iAmID”,“ div”,“ span”等。)目前不支持任何其他类型的选择器(类的复合)。

要添加的非常重要的一件事是您丢失了所有样式信息(CSS)。幸运的是,jsPDF能够很好地格式化h1,h2,h3等,足以满足我的目的。另外,它将仅打印文本节点内的文本,这意味着它将不打印textareas等的值。例:

<body>
  <ul>
    <!-- This is printed as the element contains a textnode -->        
    <li>Print me!</li>
  </ul>
  <div>
    <!-- This is not printed because jsPDF doesn't deal with the value attribute -->
    <input type="textarea" value="Please print me, too!">
  </div>
</body>

这是简单的解决方案。这对我有用。您可以使用javascript打印概念并将其简单另存为pdf。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $("#btnPrint").live("click", function () {
            var divContents = $("#dvContainer").html();
            var printWindow = window.open('', '', 'height=400,width=800');
            printWindow.document.write('<html><head><title>DIV Contents</title>');
            printWindow.document.write('</head><body >');
            printWindow.document.write(divContents);
            printWindow.document.write('</body></html>');
            printWindow.document.close();
            printWindow.print();
        });
    </script>
</head>
<body>
    <form id="form1">
    <div id="dvContainer">
        This content needs to be printed.
    </div>
    <input type="button" value="Print Div Contents" id="btnPrint" />
    </form>
</body>
</html>

您可以使用autoPrint()并将输出设置为“ dataurlnewwindow”,如下所示:

function printPDF() {
    var printDoc = new jsPDF();
    printDoc.fromHTML($('#pdf').get(0), 10, 10, {'width': 180});
    printDoc.autoPrint();
    printDoc.output("dataurlnewwindow"); // this opens a new popup,  after this the PDF opens the print window view but there are browser inconsistencies with how this is handled
}

如果您需要特定页面的可下载pdf文件,只需添加这样的按钮

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

使用window.print()打印所有页面而不仅仅是div

如前所述,您应该使用jsPDFhtml2canvas我还在jsPDF问题中发现了一个函数,该函数可自动将pdf拆分为多个页面(

function makePDF() {

    var quotes = document.getElementById('container-fluid');

    html2canvas(quotes, {
        onrendered: function(canvas) {

        //! MAKE YOUR PDF
        var pdf = new jsPDF('p', 'pt', 'letter');

        for (var i = 0; i <= quotes.clientHeight/980; i++) {
            //! This is all just html2canvas stuff
            var srcImg  = canvas;
            var sX      = 0;
            var sY      = 980*i; // start 980 pixels down for every new page
            var sWidth  = 900;
            var sHeight = 980;
            var dX      = 0;
            var dY      = 0;
            var dWidth  = 900;
            var dHeight = 980;

            window.onePageCanvas = document.createElement("canvas");
            onePageCanvas.setAttribute('width', 900);
            onePageCanvas.setAttribute('height', 980);
            var ctx = onePageCanvas.getContext('2d');
            // details on this usage of this function: 
            // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing
            ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);

            // document.body.appendChild(canvas);
            var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);

            var width         = onePageCanvas.width;
            var height        = onePageCanvas.clientHeight;

            //! If we're on anything other than the first page,
            // add another page
            if (i > 0) {
                pdf.addPage(612, 791); //8.5" x 11" in pts (in*72)
            }
            //! now we declare that we're working on that page
            pdf.setPage(i+1);
            //! now we add content to that page!
            pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62));

        }
        //! after the for loop is finished running, we save the pdf.
        pdf.save('test.pdf');
    }
  });
}
  • 无依赖,纯JS
  • 要添加CSS或图像-请勿使用相对URL,请使用完整URLhttp://...domain.../path.css左右。它创建了单独的HTML文档,并且没有主要内容的上下文。
  • 您也可以将图像嵌入为base64

这为我服务了多年:

export default function printDiv({divId, title}) {
  let mywindow = window.open('', 'PRINT', 'height=650,width=900,top=100,left=150');

  mywindow.document.write(`<html><head><title>${title}</title>`);
  mywindow.document.write('</head><body >');
  mywindow.document.write(document.getElementById(divId).innerHTML);
  mywindow.document.write('</body></html>');

  mywindow.document.close(); // necessary for IE >= 10
  mywindow.focus(); // necessary for IE >= 10*/

  mywindow.print();
  mywindow.close();

  return true;
}

一种方法是使用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;
}

我使用jspdfhtml2canvas进行CSS渲染,并导出特定div的内容,因为这是我的代码

$(document).ready(function () {
    let btn=$('#c-oreder-preview');
    btn.text('download');
    btn.on('click',()=> {

        $('#c-invoice').modal('show');
        setTimeout(function () {
            html2canvas(document.querySelector("#c-print")).then(canvas => {
                //$("#previewBeforeDownload").html(canvas);
                var imgData = canvas.toDataURL("image/jpeg",1);
                var pdf = new jsPDF("p", "mm", "a4");
                var pageWidth = pdf.internal.pageSize.getWidth();
                var pageHeight = pdf.internal.pageSize.getHeight();
                var imageWidth = canvas.width;
                var imageHeight = canvas.height;

                var ratio = imageWidth/imageHeight >= pageWidth/pageHeight ? pageWidth/imageWidth : pageHeight/imageHeight;
                //pdf = new jsPDF(this.state.orientation, undefined, format);
                pdf.addImage(imgData, 'JPEG', 0, 0, imageWidth * ratio, imageHeight * ratio);
                pdf.save("invoice.pdf");
                //$("#previewBeforeDownload").hide();
                $('#c-invoice').modal('hide');
            });
        },500);

        });
});

使用pdfMake.js此Gist

(我在这里找到了Gist以及指向html-to-pdfmake软件包的链接,但最终我暂时不使用它。)

npm install pdfmake保存要点之后,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,并上传其二进制内容(可以通过pdfMakegetBuffer()功能获得),全部都从浏览器中获取。对于这种类型的html来说,生成的pdf比我尝试过的其他解决方案更好。
  • 我不满意jsPDF.fromHTML()所接受答案中建议的结果,因为该解决方案容易被HTML中的特殊字符混淆,这些特殊字符显然被解释为一种标记,并且完全弄乱了生成的PDF。
  • 对我来说,使用基于画布的解决方案(例如不推荐使用的jsPDF.from_html()功能,不要与接受的答案相混淆)不是我的选择,因为我希望生成的PDF中的文本可粘贴,而基于画布的解决方案则生成基于位图的PDF。
  • md到pdf之类的pdf转换器直接降价仅是服务器端的,对我而言不起作用。
  • 使用浏览器的打印功能对我不起作用,因为我不想显示生成的PDF,而是上载其二进制内容。

如果要导出表,可以查看Shield UI Grid小部件提供的此导出示例

通过扩展如下配置来完成:

...
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" }
            ]
        }
    }
}
...

我能够获得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>

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

为了实现它,您需要首先获取一个应用程序密钥和机密,然后下载(免费)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选择器,就像前面的示例一样。现在,加载页面后,现在将在与脚本标签相同的位置创建图像屏幕快照,其中将包含功能div的所有内容,仅包含其他内容。

您可以对div屏幕截图机制执行的其他配置和自定义操作,请在此处查看

本文地址:http://javascript.askforanswer.com/shiyongjavascriptcongdivzhongdehtmlshengchengpdf.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!