html生成PDF与图片

import domtoimage from 'dom-to-image';
import JsPDF from 'jspdf';
import {getTimeInfo} from "./publicMethods";
import {Message} from "element-ui";

export default class HtmlToPdfOrImg {
    /**
     * 下载html至pdf
     * @param ele htmlID名称
     * @param fileName 文件名称(不传会默认生成)
     */
    static downloadPDF(ele, fileName = '') {
        const dom = document.getElementById(ele);
        domtoimage.toJpeg(dom, {})
            .then((dataURL) => {
                const img = document.createElement('img');
                const contentWidth = dom.clientWidth;
                const contentHeight = dom.clientHeight;
                img.src = dataURL;
                //一页pdf显示html页面生成的canvas高度;
                const pageHeight = contentWidth / 595.28 * 841.89;
                //未生成pdf的html页面高度
                let leftHeight = contentHeight;
                //页面偏移
                let position = 0;
                //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                const imgWidth = 595.28;
                const imgHeight = 595.28 / contentWidth * contentHeight;
                const pdf = new JsPDF('', 'pt', 'a4');
                //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
                //当内容未超过pdf一页显示的范围，无需分页
                if (leftHeight < pageHeight) {
                    //在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
                    pdf.addImage(img, 'JPEG', 0, 0, imgWidth, imgHeight);
                    // pdf.addImage(pageData, 'JPEG', 20, 40, imgWidth, imgHeight);
                } else {    // 分页
                    while (leftHeight > 10) {
                        pdf.addImage(img, 'JPEG', 0, position, imgWidth, imgHeight);
                        leftHeight -= pageHeight;
                        position -= 841.89;
                        //避免添加空白页
                        if (leftHeight > 10) {
                            pdf.addPage();
                        }
                    }
                }
                const {year, mouth, day, hours, minutes, seconds} = getTimeInfo();
                //可动态生成
                pdf.save(fileName || `${year}年${mouth}月${day}日${hours}时${minutes}分${seconds}秒_${parseInt((Math.random()) * 1000000)}`);
            })
            .catch(function (error) {
                Message.error('附件下载失败')
            });
    }

    /***
     * html转的图片
     * @param dom htmlID名称
     * @param fileName 文件名称(不传会默认生成)
     */
    static previewImg(dom, fileName = '') {
        domtoimage.toJpeg(document.getElementById(dom), {})
            .then((dataUrl) => {
                const link = document.createElement('a');
                link.href = dataUrl;
                const {year, mouth, day, hours, minutes, seconds} = getTimeInfo();
                link.download = `${fileName || `${year}年${mouth}月${day}日${hours}时${minutes}分${seconds}秒_${parseInt((Math.random()) * 1000000)}`}.jpg`;
                document.body.style.height = '100%';
                link.click()
            })
            .catch(function (error) {
                Message.error('图片下载失败')
            });
    }
}

html转下载图片
<div @click="previewImg('htmlID','文件名称，可不传自动生成')"></div>
html转下载pdf
<div @click="downloadPDF('htmlID','文件名称，可不传自动生成')"></div>

依赖：
yarn add dom-to-image 或 npm install dom-to-image
yarn add jspdf 或 npm install jspdf