前端页面转pdf

首先,需要安装两个库
  1. html2canvas
  2. jspdf

先引入这个公用的html转pdf的方法

javascript 复制代码
/**
	path:src/utils/htmlToPdf.js
	name:导出页面为pdf格式
**/
import html2Canvas from "html2canvas@1.4.1";
import JsPDF from "jspdf@2.5.1";

const htmlToPdf  = {
    getPdf(title) {
        html2Canvas(document.querySelector('#pdfDom'), {
            allowTaint:true,
        }).then((canvas) => {
            //内容的宽度
            let contentWidth = canvas.width;
            //内容高度
            let contentHeight = canvas.height;
            //一页pdf显示html页面生成的canvas高度,a4纸的尺寸(595.28,841.89)
            let pageHeight = (contentWidth / 592.28) *  841.89;
      		//未生成pdf的html页面高度
            let leftHeight = contentHeight;
            //页面偏移
            let position = 0;
            //a4纸的尺寸(595.28,841.89),html页面生成的canvas在pdf中图片的宽高
            let imgWidth = 595.28 ;
            let imgHeight = (592.28 / contentWidth) * contentHeight;
            //canvas转图片数据
            let pageData = canvas.toDataURL("image/jpeg",1.0) ;
            //新建JsPDF对象(a:横线排列还是竖向排列,b:单位,c:a4纸)
            let PDF = new JsPDF("","pt","a4")
            
            debugger;
            
            //判断是否分页
            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(title + ".pdf")
        });
    }
};
export default htmlToPdf;
相关推荐
小小小小宇5 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊5 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习6 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖6 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水6 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐6 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121387 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴7 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript