前端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')
     }
 }
相关推荐
遂心_13 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
Gracemark13 小时前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
遂心_13 小时前
深入理解 React Hook:useEffect 完全指南
前端·javascript·react.js
前端Hardy14 小时前
HTML&CSS: 谁懂啊!用代码 “擦去”图片雾气
前端·javascript·css
前端Hardy14 小时前
HTML&CSS:好精致的导航栏
前端·javascript·css
天下无贼14 小时前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
一个不爱写代码的瘦子14 小时前
迭代器和生成器
前端·javascript
洋葱头_15 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing15 小时前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化
ygria16 小时前
样式工程化:如何实现Design System
前端·前端框架·前端工程化