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()
    })
}
相关推荐
灵感__idea6 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴7 小时前
Mix
前端·webgl
代码续发8 小时前
前端组件梳理
前端
VB5948 小时前
《考研 考证 各学科 各专业 思维导图汇总》PDF 5.2GB
考研·pdf
试图让你心动8 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码9 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记9 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏9 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数9 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante10 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端