前端页面转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;
相关推荐
睡美人的小仙女1271 小时前
在 Vue 前端(Vue2/Vue3 通用)载入 JSON 格式的动图
前端·javascript·vue.js
yuanyxh1 小时前
React Native 初体验
前端·react native·react.js
程序视点2 小时前
2025最佳图片无损放大工具推荐:realesrgan-gui评测与下载指南
前端·后端
程序视点3 小时前
2023最新HitPaw免注册版下载:一键去除图片视频水印的终极教程
前端
小只笨笨狗~4 小时前
el-dialog宽度根据内容撑开
前端·vue.js·elementui
weixin_490354344 小时前
Vue设计与实现
前端·javascript·vue.js
何为xl4 小时前
【VSCode】使用VSCode打开md文件以及转化为PDF
ide·vscode·pdf
烛阴5 小时前
带你用TS彻底搞懂ECS架构模式
前端·javascript·typescript
卓码软件测评6 小时前
【第三方网站运行环境测试:服务器配置(如Nginx/Apache)的WEB安全测试重点】
运维·服务器·前端·网络协议·nginx·web安全·apache
龙在天6 小时前
前端不求人系列 之 一条命令自动部署项目
前端