html转换pdf 分页,(html2canvas jspdf)html转pdf带分页

1、下载npm包

npm i html2canvas jspdf -s

2、页面引入

import html2canvas from 'html2canvas';

import jsPDF from 'jspdf';

3、页面加载完成时调用函数

// 生成pdf

const getPdf = () => {

html2canvas(document.getElementById(`canvas`), {

scale: 2, // 提升画面质量，但是会增加文件大小

}).then(function (canvas) {

const contentWidth = canvas.width;

const contentHeight = canvas.height;

//一页pdf显示html页面生成的canvas高度;

var pageHeight = (contentWidth / 592.28) * 841.89;

//未生成pdf的html页面高度

let leftHeight = contentHeight;

//页面偏移

let position = 0;

//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高

const imgWidth = 595.28;

const imgHeight = (592.28 / contentWidth) * contentHeight;

const pageData = canvas.toDataURL('image/jpeg', 1.0);

const 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(`${sessionStorage.getItem('name')}.pdf`);

});

};

html转换pdf 分页,(html2canvas jspdf)html转pdf带分页相关推荐

vue导出多页PDF（html2Canvas + jsPdf）（PDF左右边距）
我的另一篇文章写了autoTable+jsPdf生成PDF 参考这里 1.将html转成图片canvas( scrollY: refDom.top, // 关键代码,截取长度 heig ...
html2Canvas + jsPDF vue生成pdf（A4纵向或A3横向）
1: 第一个.将页面html转换成图片 npm install --save html2canvas 第二个.将图片生成pdf npm install jspdf --save 2:创建名称 html ...
php tp框架分页源代码,ThinkPHP3.2框架自带分页功能实现方法示例
本文实例讲述了ThinkPHP3.2框架自带分页功能实现方法.分享给大家供大家参考,具体如下: 1.前端-分页代码: {$page} 2.创建分页样式:如page.css 并将以下代码复制到该文件中 ...
谷粒学院-分页查询、条件查询带分页、添加、修改
讲师分页查询注意:也可以使用MyBatis分页插件PageHelper,这里不用 https://blog.csdn.net/ZHOU_VIP/article/details/121773800 1 ...
【html转pdf】html页面导出为pdf文件，纯html版本，简单实现pdf转换【html2canvas+jspdf】
前言最近遇到的需求,把html转成pdf文件下载导出. 目前网上看了下,有三种方法,但是其中两种需要后端配合一种是纯前端实现的,比较简单.所以就使用了这种. 也就是html2canvas + js ...
jspdf 分页_使用html2canvas跟jspdf导出导出PDF文件
前言:最近项目中有将html文件导出PDF需求,了解网上有jspdf,whtmltopdf等方法. 由于whtmltopdf需要在服务端安装whtmltopdf,为了简便,选择了js方法. 需要插件: ...
html页面导出pdf截断问题,html2canvas 与 jspdf 相结合生成 pdf 内容被截断的终极解决方案...
欢迎关注我的公众号 <人生代码> 我有一个大胆的想法,我要一直写到死,那一天我不写了,可能就死了.哈哈. 哈喽,大家好,我是你们的攻城狮,人贱人爱的 Ken,一个永远充满激情的人. 最近接 ...
html2canvas + jspdf 实现 html导出pdf
html2canvas + jspdf 实现 html导出pdf 1.下载插件 npm install html2canvas jspdf --save 2.utils中创建htmlToPdf.js文 ...
使用html2canvas+jspdf导出iframe内容到pdf文件
使用html2canvas+jspdf导出iframe内容到pdf文件工具如下: html2canvas.js html2canvas.min.js jspdf.debug.js 代码如下: < ...

html转换pdf 分页,(html2canvas jspdf)html转pdf带分页

html转换pdf 分页,(html2canvas jspdf)html转pdf带分页相关推荐

最新文章

热门文章