前端html生成PDF

需要用到的组件

1、html2canvas

地址:http://html2canvas.hertzen.com/

安装:npm install --save html2canvas

2、jsPDF

地址:https://github.com/parallax/jsPDF

安装:npm install jspdf --save

代码

javascript 复制代码
// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

export default function (name, dom) {
    // return
    let targetDom = document.querySelector(dom)
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    const steup = {
        allowTaint: true, // 是否允许跨源图片
        useCORS: true, // 是否尝试使用 CORS 从服务器加载图像
        height: targetDom.offsetHeight,
        width: targetDom.offsetWidth,
        windowWidth: document.body.scrollWidth, // 渲染Element时使用的窗口宽度
        windowHeight: document.body.scrollHeight, // 渲染Element时使用的窗口高度
        x: 0,
        y: scrollTop, // 用网页滚动的高度定位y轴顶点
        dpi: window.devicePixelRatio * 2,
        scale: 2 // 用于渲染的比例。
    }
    html2Canvas(targetDom, steup).then(function (canvas) {
        let contentWidth = canvas.width
        let contentHeight = canvas.height
        // a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
        let imgWidth = 595.28
        let a4Height = 841.89
        let imgHeight = Math.floor(imgWidth / contentWidth * contentHeight)

        // 一页pdf显示html页面生成的canvas高度; pageHeight + 2是为了去掉最后的空白页
        let pageHeight = Math.floor(contentWidth / imgWidth * a4Height) + 2

        // 未生成pdf的html页面高度
        let leftHeight = contentHeight
        //页面偏移
        let position = 0

        // 返回图片dataURL,参数:图片格式和清晰度(0-1)
        let pageData = canvas.toDataURL('image/jpeg', 1.0)

        /**
         * new JsPDF(x, y, z)
         * x: 排版方向,默认是竖版 landscape
         * y: 单位
         * z: 尺寸
         * **/
        let PDF = new JsPDF('', 'pt', 'a4')

        // 有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
        // 当内容未超过pdf一页显示的范围,无需分页
        if (leftHeight < pageHeight) {
            // 20, 0 l两个参数分别控制 左边 上边的距离, 此处将页面高度按照a4纸宽高比列进行压缩
            PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
        } else {
            while (leftHeight > 0) {
                PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                leftHeight -= pageHeight
                position -= a4Height
                 //避免添加空白页
                if (leftHeight > 0) {
                    PDF.addPage()
                }
            }
        }
        PDF.save(name + '.pdf')
    })
}

在页面中使用

javascript 复制代码
import htmlToPDF from '@/utils/htmlToPDF'
 methods: {
     getPdf () {
         htmlToPDF('PDF名称', 'ID')
     }
 }
相关推荐
浪裡遊6 分钟前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
幽络源小助理17 分钟前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
lzb_kkk1 小时前
【C++】C++四种类型转换操作符详解
开发语言·c++·windows·1024程序员节
Liudef062 小时前
2048小游戏实现
javascript·css·css3
鱼樱前端3 小时前
今天介绍下最新更新的Vite7
前端·vue.js
独立开阀者_FwtCoder4 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
我想说一句4 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
汤姆Tom4 小时前
JavaScript reduce()函数详解
javascript
小飞悟4 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子4 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript