前端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')
     }
 }
相关推荐
不想有bug的小菜鸟9 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
quitv15 分钟前
react脚手架配置别名
前端·javascript·react.js
化作繁星26 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一只小姜丝3321 小时前
解决各大浏览器中http地址无权限调用麦克风摄像头问题
网络·vue.js·网络协议·http
Gazer_S2 小时前
【现代前端框架中本地图片资源的处理方案】
前端·javascript·chrome·缓存·前端框架
林的快手4 小时前
CSS默认样式
前端·css·vue.js·chrome·css3
贺今宵4 小时前
通过$attrs传递的未指定名称的modelValue值在子组件中修改
前端·javascript
lifire_H8 小时前
Canvas在视频应用中的技术解析
前端·javascript·音视频
林涧泣8 小时前
【Uniapp-Vue3】开发userStore用户所需的相关操作
前端·vue.js·uni-app
皓月当空hy10 小时前
vue3中测试:单元测试、组件测试、端到端测试
vue.js