关于pdf和canvas的几个js工具函数

关于pdf和canvas的几个js工具函数

import html2canvas from 'html2canvas'
// import JsPDF from 'jspdf'

/**
 * @description 该工具库依赖于html2canvas和jspdf两个库，若只需要其中一个功能，可自行引入对应的库
 * @description 每个函数都返回一个promise对象，可使用async/await调用
 * @description 公有如下方法：downloadImage(下载为图片)、downloadPdf(下载为pdf)、print(调取系统打印机)、getImgBase64(获取图片Base64)、getImgFile(获取图片文件对象) 
 * @author liuzhangyun
 * @date 2023-04-19
 */
async function getCanvas(dom) {
    return await html2canvas(dom, {
        allowTaint: true,
        taintTest: false,
        useCORS: true,
        //width:960,
        //height:5072,
        dpi: window.devicePixelRatio * 4, //将分辨率提高到特定的DPI 提高四倍
        scale: 4 //按比例增加分辨率
    })
}


/**
 * @description 下载图片
 * @param {String} fileName  文件名
 */
async function downloadImage(dom, fileName = 'example') {
    let canvas = await getCanvas(dom)
    let image = canvas.toDataURL("image/png")
    let link = document.createElement('a');
    link.download = fileName;
    link.href = image;
    link.click();
}

/**
 * @description 下载为pdf
 * @param {String} fileName  文件名
 */
async function downloadPdf(dom, fileName = 'example') {
    let canvas = await getCanvas(dom)
    // 内容的宽度
    let contentWidth = canvas.width
    // 内容的高度
    let contentHeight = canvas.height
    // 一页pdf显示html页面生成的canvas高度，a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
    let pageHeight = contentWidth / 592.28 * 841.89
    // 未生成pdf的html页面高度
    let leftHeight = contentHeight
    // pdf页面偏移
    let position = 0
    // a4纸的尺寸[595.28,841.89]，a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
    let imgWidth = 595.28
    let imgHeight = 592.28 / contentWidth * contentHeight
    // canvas转成图片数据
    let pageData = canvas.toDataURL('image/jpeg', 1.0)
    // 生成pdf
    let pdf = new JsPDF('', 'pt', 'a4')
    // 判断是否需要分页
    if (leftHeight < pageHeight) {
        pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
    } else {
        while (leftHeight > 0) {
            pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
            leftHeight -= pageHeight
            position -= 841.89
            // 避免添加空白页
            if (leftHeight > 0) {
                pdf.addPage()
            }
        }
    }
    // 保存pdf
    pdf.save(`${fileName}.pdf`)
}

/** 
 * @description 打印(系统打印)
 * @param {Element} dom 需要输出的dom节点
*/
async function print(dom) {
    let canvas = await getCanvas(dom)
    const dataUrl = canvas.toDataURL()
    const printWindow = window.open()
    printWindow.document.write(`${dataUrl}" οnlοad="window.print()">`)
    printWindow.document.close()
}

/**
 * @description 获取图片文件对象
 * @param {Element} dom 需要输出的dom节点
 * @param {String} fileName  文件名
 */

async function getImgFile(dom, filename = 'file') {
    let canvas = await getCanvas(dom)
    return new Promise((resolve) => {
        canvas.toBlob((blob) => {
            const file = new File([blob], filename);
            resolve(file);
        });
    });
}

/**
 * @description 获取图片base64
 * @param {Element} dom 需要输出的dom节点
 */
async function getImgBase64(dom) {
    let canvas = await getCanvas(dom)
    let data = canvas.toDataURL('image/png')
    let _data = data.split(',')[1]
    return _data
}

export default {
    downloadImage,
    downloadPdf,
    print,
    getImgBase64,
    getImgFile
}