纯前端html导出pdf(jsPDF.js)-分页-不分页

欢迎点击: 个人官网博客

基础效果图：
demo源码

使用html2canvas自动分页效果图：
demo源码

一、基础：

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,hdoc.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};</script>

使用htmlcanvas

如果不了解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.widthvar 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.28var imgHeight = 592.28 / contentWidth * contentHeightvar pageData = canvas.toDataURL('image/jpeg', 1.0)// eslint-disable-next-linevar 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 -= pageHeightposition -= 841.89// 避免添加空白页if (leftHeight > 0) {pdf.addPage()}}}// pdf.save('demo.pdf')$('#pdf').attr('src', pdf.output('datauristring'))},background: '#fff'//背景色})

纯前端html导出pdf(jsPDF.js)-分页-不分页相关推荐

纯前端excel导出
文章目录背景技术选型 1.xlsx(`不满足`) 2.xlsx-style(`不推荐,后期问题太多`) 3.lay-excel(`推荐`) 一.准备内容数据二.准备表头数据三.认识lay-ex ...
jsPdf+html2Canvas+react实现前端页面导出pdf，并解决jspdf分页图片过长截断问题
第一步在utils下面创建一个工具文件exportPDF.js 以下每一句代码都有对应的注释,并且针对不同情况,作出了相应的解释,如果有需要的话,请耐心看完. import html2Canvas ...
js vue 设置excel单元格样式_vue+elementui 项目纯前端Export2Excel导出excel，并利用xlsx-style设置单元格样式...
1 /*eslint-disable*/ 2 require('script-loader!file-saver');3 require('./Blob.js'); //blob.js也是网上找的,下 ...
前端vue导出pdf
1.下载插件 npm install html2canvas npm install jspdf 2.创建htmlToPdf.js** 2-1(一页展示所有内容,可避免分页截断) import htm ...
js-xlsx/xlsx-style 纯前端数据导出Excel且支持自定义样式
前端开发过程中经常遇到导出excel的需求.这种情况大多数都是服务端处理数据(QAQ至少我遇到的大多数都是这样),然后返回一个链接,前端不需要管服务端怎么操作直接打开这个链接(window.locat ...
纯前端 vue 导出excel 这里用 vue-json-excel插件
1.npm安装依赖 npm install vue-json-excel 2.项目主文件入口main.js全局引入 import JsonExcel from 'vue-json-excel'Vue. ...
使用VUE+XLSX实现纯前端的导出Excel
1. 安装需要的插件 npm i xlsx -S npm i xlsx-style -S npm i file-saver -S 安装完xlsx-style插件并引入后启动项目会报错 ./cptabl ...
vue 前端导出Excel表格（基础版 + 多级标题）纯前端导出
先看效果纯前端基础导出的Excel表格纯前端多级表头导出的Excel表格基础导出下面赋源代码 1.安装依赖 npm install vue-json-excel 2.在项目的入口 main.js ...
利用Exceljs/file-saver实现纯前端的同一个sheet页实现导出多个表格，拼接
vue版纯前端实现导出(同一个sheet页导出多个表格)- 组合 1.安装依赖 2.引入依赖 3.导出测试 4.效果 1.安装依赖 npm install exceljs --save npm ins ...
「Java工具类」pdf导出工具类java导出pdf文件工具类
介绍语本号主要是Java常用关键技术点,通用工具类的分享:以及springboot+springcloud+Mybatisplus+druid+mysql+redis+swagger+maven+d ...

纯前端html导出pdf(jsPDF.js)-分页-不分页

一、基础：

二、自动分页pdf

纯前端html导出pdf(jsPDF.js)-分页-不分页相关推荐

最新文章

热门文章