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()
    })
}
相关推荐
Cacciatore->1 小时前
Electron 快速上手
javascript·arcgis·electron
vvilkim1 小时前
Electron 进程间通信(IPC)深度优化指南
前端·javascript·electron
某公司摸鱼前端2 小时前
ES13(ES2022)新特性整理
javascript·ecmascript·es13
ai小鬼头3 小时前
百度秒搭发布:无代码编程如何让普通人轻松打造AI应用?
前端·后端·github
漂流瓶jz3 小时前
清除浮动/避开margin折叠:前端CSS中BFC的特点与限制
前端·css·面试
前端 贾公子3 小时前
在移动端使用 Tailwind CSS (uniapp)
前端·uni-app
散步去海边3 小时前
Cursor 进阶使用教程
前端·ai编程·cursor
清幽竹客3 小时前
vue-30(理解 Nuxt.js 目录结构)
前端·javascript·vue.js
weiweiweb8883 小时前
cesium加载Draco几何压缩数据
前端·javascript·vue.js
幼儿园技术家3 小时前
微信小店与微信小程序简单集成指南
前端