前端html生成PDF

需要用到的组件

1、html2canvas
地址：http://html2canvas.hertzen.com/
安装：npm install --save html2canvas
2、jsPDF
地址：https://github.com/parallax/jsPDF
安装：npm install jspdf --save

代码

// 导出页面为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, // 渲染E服务器托管网lement时使用的窗口高度
        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, im服务器托管网gWidth, imgHeight)
                leftHeight -= pageHeight
                position -= a4Height
                 //避免添加空白页
                if (leftHeight > 0) {
                    PDF.addPage()
                }
            }
        }
        PDF.save(name + '.pdf')
    })
}

在页面中使用

import htmlToPDF from '@/utils/htmlToPDF'
 methods: {
     getPdf () {
         htmlToPDF('PDF名称', 'ID')
     }
 }

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: SpringBoot+Vue3+Element Plus 打造分布式存储系统

download：SpringBoot+Vue3+Element Plus 打造分布式存储系统 Vue开发仿社交小程序随着社交网络的普及，社交小程序逐渐成为人们日常生活中必不可少的一部分。本篇文章将介绍如何使用Vue框架开发一个仿社交小程序。 技术选型在开始开…