前端页面转pdf

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

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

javascript 复制代码
/**
	path:src/utils/htmlToPdf.js
	name:导出页面为pdf格式
**/
import html2Canvas from "[email protected]";
import JsPDF from "[email protected]";

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;
相关推荐
泯泷1 分钟前
「译」解析 JavaScript 中的循环依赖
前端·javascript·架构
抹茶san4 分钟前
前端实战:从 0 开始搭建 pnpm 单一仓库(1)
前端·架构
Senar31 分钟前
Web端选择本地文件的几种方式
前端·javascript·html
烛阴1 小时前
UV Coordinates & Uniforms -- OpenGL UV坐标和Uniform变量
前端·webgl
姑苏洛言1 小时前
扫码小程序实现仓库进销存管理中遇到的问题 setStorageSync 存储大小限制错误解决方案
前端·后端
烛阴1 小时前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
lh_12542 小时前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx2 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
Mikey_n2 小时前
前台调用接口的方式及速率对比
前端
Sherlock Ma2 小时前
PDFMathTranslate:基于LLM的PDF文档翻译及双语对照的工具【使用教程】
人工智能·pytorch·语言模型·pdf·大模型·机器翻译·deepseek