js生成pdf

js生成pdf

html->img->pdf

下载依赖

javascript 复制代码
npm install html2canvas
npm install jspdf

引入依赖

javascript 复制代码
import html2canvas from "html2canvas"
import jsPDF from 'jspdf';

代码

javascript 复制代码
const A4_WIDTH = 595.28
const A4_HEIGHT = 841.89
//参数 html(dom) imgsrc(封面可不加,直接加到第一个参数) fileName(文件名称)
export const handleHtml2pdf = (html, imgSrc, fileName, cb) => {
    new html2canvas(html, {
        useCORS: true,
        allowTaint: true,
    }).then(canvas => {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = contentWidth / A4_WIDTH * A4_HEIGHT;
        //未生成pdf的html页面高度
        var leftHeight = contentHeight;
        //页面偏移
        var position = 0;
        //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
        var imgWidth = A4_WIDTH;
        var imgHeight = A4_WIDTH / contentWidth * contentHeight;
        var pageData = canvas.toDataURL('image/jpeg', 1.0);
        var pdf = new jsPDF('', 'pt', 'a4');
        if (imgSrc) {
            pdf.addImage(imgSrc, 'JPEG', 0, 0, imgWidth, imgHeight);
            pdf.addPage();
        }
        if (leftHeight < pageHeight) {
            pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
        } else {
            while (leftHeight > 0) {
                //arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
                pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                leftHeight -= pageHeight;
                position -= A4_HEIGHT;
                //避免添加空白页
                if (leftHeight > 0) {
                    pdf.addPage();
                }
            }
        }
        pdf.save(fileName || "pdf.pdf");
        cb()
    })
}
相关推荐
WebDesign_Mu15 分钟前
为了庆祝2025英雄联盟全球总决赛开启,我用HTML+CSS+JS制作了LOL官方网站
javascript·css·html
@PHARAOH30 分钟前
WHAT - 前端性能指标(交互和响应性能指标)
前端·交互
噢,我明白了31 分钟前
前端js 常见算法面试题目详解
前端·javascript·算法
im_AMBER32 分钟前
Web 开发 30
前端·笔记·后端·学习·web
学编程的小虎32 分钟前
用 Python + Vue3 打造超炫酷音乐播放器:网易云歌单爬取 + Three.js 波形可视化
开发语言·javascript·python
Jonathan Star36 分钟前
Webpack 打包优化与骨架屏结合:双管齐下提升前端性能与用户体验
前端·webpack·ux
做好一个小前端1 小时前
后端接口获取到csv格式内容并导出,拒绝乱码
前端·javascript·html
第七种黄昏1 小时前
前端面试-箭头函数
前端·面试·职场和发展
Youyzq1 小时前
前端box-shadow出现兼容性问题如何处理
前端
携欢1 小时前
PortSwigger靶场之将 XSS 存储到onclick带有尖括号和双引号 HTML 编码以及单引号和反斜杠转义的事件中通关秘籍
前端·html·xss