纯前端html导出pdf(jsPDF.js)-分页-不分页_web前端小龚的博客

相关文章推荐
谦和的机器人 · Laravel 使用 ...· 1 年前 ·
小眼睛的毛豆 · Vue.js ...· 1 年前 ·
失落的金鱼 · excel 宏 ...· 1 年前 ·
逼格高的凉面 · 智能指针（现代 C++） | ...· 1 年前 ·
细心的机器猫 · asp.net页面传值之QueryStrin ...· 1 年前 ·
1.先引入几个文件
<script src="http://www.jq22.com/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jspdf/1.5.2/jspdf.min.js"></script>
2.平常我们都是后端传链接打开新窗口预览pdf，那么在纯前端html中可以使用iframe标签预览pdf,jspdf或者配合html2canvas创建pdf 
<iframe id="pdf" width="500" height="400" seamless scrolling="yes" src="" frameborder="0"></iframe>
//看不懂这一句，请往下看
 const doc = new jsPDF('p', 'pt', 'a4')//a4纸大小
$('#pdf').attr('src', doc.output('datauristring')) //预览放在iframe标签
 直接下载pdf：doc.save(“a4.pdf”);
 导出pdf文件数据：doc.output(‘datauristring’)
 添加一页： doc.addPage(); 
3.文字，图片，多边形，的运用 
<script>
        const doc = new jsPDF('p', 'pt', 'a4')//a4纸大小
        // // 打印所有可用的字体
        // console.log(doc.getFontList());
        // // 设置字体（内置的几种字体都是不支持中文，中文字体需要自己添加）
        // doc.setFont(doc.getFontList()[3]);
        doc.setFontSize(10)
        doc.text(20, 20, 'This is the default font.');
        doc.setFont("courier");
        doc.setFontType("normal");
        doc.text(20, 30, 'This is courier normal.');
        doc.setFont("times");
        doc.setFontType("italic");
        doc.text(20, 40, 'This is times italic.');
        doc.setFont("helvetica");
        doc.setFontType("bold");
        doc.text(20, 50, 'This is helvetica bold.');
        doc.setTextColor(255, 0, 0);
        doc.setFont("courier");
        doc.setFontType("bolditalic");
        doc.text(20, 60, 'This is courier bbolditalic');
        //多边形
        doc.setLineWidth(1);
        doc.setDrawColor(255, 0, 0);
        doc.setFillColor(0, 0, 255);
        doc.triangle(100, 100, 110, 100, 120, 130, 'FD'); //分别三点x,y坐标
        var myImage = new Image();
        myImage.src = './s1.png';
        myImage.onload = function () {
            //x,y,w,h
            doc.addImage(myImage, 'png', 50, 100, myImage.width, myImage.height);
            console.log(doc.output('datauristring')) //所生成的pdf文件
            doc.addPage(); //如果后面还有内容，添加一个空页
            doc.addImage(myImage, 'png', 50, 100, myImage.width, myImage.height); //相对于新添加一个空页
            $('#pdf').attr('src', doc.output('datauristring')) //预览放在iframe标签
              // doc.save("a4.pdf");//保存为pdf
如果不了解htmlcanvas，点击这里 
function create() {
            var dom = $('.poster-container')//为需要生成pdf最外层的div盒子
            html2canvas(dom[0], {
                useCORS: true, //跨域
                allowTaint: false,
                logging: false,
                letterRendering: true,
                taintTest: true, //在渲染前测试图片
                dpi: window.devicePixelRatio, // window.devicePixelRatio是设备像素比
                background: "#fff"
            }).then(function (canvas) {
                var imgUrl = canvas.toDataURL('image/png');
                doc.addImage(imgUrl, 'png', 0, 100, $('.poster-container').width(), $('.poster-container')
                    .height());
                $('#pdf').attr('src', doc.output('datauristring')) //预览放在iframe标签
二、自动分页pdf
 
 巧妙的运用了html2canvas的截图效果，然后把图片转化为pdf文件 
 html2canvas(document.querySelector('#boardPdf'), {
                scale: 2,
                dpi: window.devicePixelRatio * 2,
                useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
                onrendered: function (canvas) {
                    var contentWidth = canvas.width
                    var contentHeight = canvas.height
                    // 一页pdf显示html页面生成的canvas高度;
                    var pageHeight = contentWidth / 592.28 * 841.89
                    // 未生成pdf的html页面高度
                    var leftHeight = contentHeight
                    // pdf页面偏移
                    var position = 0
                    // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                    var imgWidth = 595.28
                    var imgHeight = 592.28 / contentWidth * contentHeight
                    var pageData = canvas.toDataURL('image/jpeg', 1.0)
                    // eslint-disable-next-line
                    var pdf = new jsPDF('', 'pt', 'a4')
                    // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                    // 当内容未超过pdf一页显示的范围，无需分页
                    if (leftHeight < pageHeight) {
                        pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
                    } else {
                        while (leftHeight > 0) {
                            pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                            leftHeight -= pageHeight
                            position -= 841.89
                            // 避免添加空白页
                            if (leftHeight > 0) {
                                pdf.addPage()
                    // pdf.save('demo.pdf')
                    $('#pdf').attr('src', pdf.output('datauristring'))
                background: '#fff'//背景色
                    欢迎点击: 个人官网博客基础效果图：demo源码使用html2canvas自动分页效果图：demo源码一、基础：1.先引入几个文件&lt;script src="http://www.jq22.com/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;    &lt;script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"&g
				简单强大之处，根据前端HTML只需window.print()浏览器调用直接输出，解决了后端输出图片必须绝对链接的问题
只要你懂一点前端，就能轻松实现，对比目前后端输出PDF的功能非常复杂和维护成本极高
Demo实现功能
功能	支持 页头	是 页脚 是 页码 是 图片是 超链接 是 自定义文件名 是
每页水印	是（可实现，demo未提供）
————————————————
版权声明：本文为CSDN博主「帅气小鱼囝」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u011487477/article/details/106908739
				jspdf.js和demo,jspdf.js,jspdf.min.js,pdf.js可以实现在html下直接浏览pdf文档，是一款开源的pdf文档读取解析插件。
pdf.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js，一个负责API解析，一个负责核心解析。
				基于html2canvas jspdf导出更加清晰的图片以及pdf
document.getElementById("btn").onclick = function() {
    let cont=document.getElementById('postersbg');
    html2canvas(cont, {
      onrendered: function(canvas) {
        //通过html2canvas将html渲染成canvas，然后获取图片数据
        let imgData = canvas.toDataURL('image/jpeg',
				JSPDF.JS引入中文字库引入jspdf.js写个简单的例子添加中文字库（ttf转js）直接引入ttf文件（未完成）
引入jspdf.js
github地址：https://github.com/MrRio/jsPDF
引入在线的库
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.debug.js...
				介绍一下纯jspdf用法，将一个图片列表导出为pdf文件，根据图片宽高计算在pdf中的位置
jsPDF 是一个基于HTML5的客户端解决方案，用于生成各种用途的 PDF 文档。
官网地址：https://rawgit.com/MrRio/jsPDF/master/docs/
1、安装：npm install jspdf
2、引入：import jsPDF from "jspdf"
3、使用：
let pdf = new jsPDF('p', 'pt', [pdfX, pdfY]);
				vue.js+jspdf.js+html2pdf.js 实现页面导出PDF
原本是导出word但客户考虑到问到的安全性要求改成了PDF，由于之前的word导出也是有前端生成的，所以为了不增加工作量导出依旧有前端完成。起初在网上找了很多方法都无法实现，都想放弃了让后端写，后来看到了关于jspdf.js+html2canvas.js的文章，想着试试看吧。对于前端导出PDF我就是个小白，啥也不会。按着文章一步步写吧。
安装插件html2canvas和jspdf
npm install html2canvas--s
				output在新的窗口显示在本页面插入文件名称设置
使用jspdf生成的pdf文档，网上一般都是如何下载到本地中，使用save()方法，但是现在并不想下载，而是直接显示在页面中。
output
查找了官方文档，发现可以使用output方法：
output(type, options) → {string|window|ArrayBuffer|Blob|jsPDF|null|undefined}
源码:  jspdf.js, line 3010
生成PDF文档。
若类型参数未定义，则输出是以字符串作为.
最近在项目中，有一个导出pdf功能，需要纯前端来实现，调研了多种pdf导出方式，最终决定使用html2canvas+jsPDF来实现需求。
本文就简单介绍一下html2canvas+jsPDF导出pdf的实现，网上大部分实现导出pdf都是以分页为主的，本文还将附上不分页导出pdf的实现方法。(只附js代码)
html2canvas+jsPDF导出pdf原理：通过html2canvas将遍历页面元素，并渲染生成canvas，然后将canvas图片格式添加到jsPDF实例，生成pdf。
function exportCode(code) {
  var blob = new Blob([code], {type: 'text/plain'});
  var link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = 'code.js';
  link.click();
该函数接收一个字符串作为代码，然后使用 Blob 创建一个二进制对象，该对象表示文本文件。接下来，使用 createObjectURL() 创建一个 URL，该 URL 指向 Blob 对象。最后，使用超链接元素并设置它的属性下载文件。