生成pdf并下载

html2pdf.js

众所周知，H5生成pdf并下载最常用的就是html2pdf.js，而我也是众中的一位，常用的写法就是

downPdf(context) {
    htmlToPdf('#whiteBc', `${xxx}的报告`)
    function htmlToPdf(el,name) {
        let ele = document.querySelector(el);

        let opt = {
            margin: 20,
            filename:  name + '.pdf',
            pagebreak: { mode: ['avoid-all', 'css', 'legacy'] },
            image: {
                type: 'png',
                quality: 1
            },
            html2canvas: {
                scale: 2
            },
            jsPDF: {
                orientation: 'p',
                unit: 'pt',
                format: 'a4',
            }
        };

        html2pdf().set(opt).from(ele).save()
            .then(() => {
                
            })
            .catch(err => {
                console.error(err);
            })
    }
}

问题1：网络图片无法生成下载

解决1：直接把网络图片放在本地，引用本地的图片

问题是，我项目中的所有资源都是网络的，那把这些放到本地我不甘心啊

解决2：等待所有图片加载完成后再下载

// 修改html2canvas的配置
html2canvas: {
    scale: 2,
    CORS: true,
    useCORS: true,  // 添加这个选项以支持跨域图片
    allowTaint: true,  // 允许加载跨域图片
}
const images = ele.querySelectorAll('img');
const imagePromises = Array.from(images).map(img => {
    return new Promise((resolve, reject) => {
        // 对于每一张图片，检查其 `complete` 属性是否为 `true`（即图片是否已经完全加载）
        if (img.complete) {
            resolve();
        } else {
            // 图片加载完成
            img.onload = resolve;
            // 如果图片加载失败也调用 `resolve()`，这意味着即使图片加载失败，整个Promise也不会被拒绝。
            img.onerror = resolve;
        }
    });
});
// 当所有图片加载完毕（成功或失败），再下载执行
Promise.all(imagePromises)
    .then(() => {
        return html2pdf().set(opt).from(ele).save();
    })
    .then(() => {
        
    })
    .catch(err => {
        console.error(err);
    })

这里有个问题：我发现到测试环境后不行了，图片跨域了，但是打开控制台就又行了，这也是我上测试环境的原因，因为开发时我的控制台一直被打开着。那到底为啥呢？没找到原因，恕我无能

解决3：把图片转成base64（稍微麻烦点，但是也算解决了）

async handleImg(url) {
    return await this.toBase64(url)
},
toBase64(imgUrl) {
    return new Promise((resolve, reject) => {
        try {
            let image = new window.Image()
            image.setAttribute('crossOrigin', 'anonymous')
            image.src = imgUrl
            image.onload = () => {
                let canvas = document.createElement('canvas')
                canvas.width = image.width
                canvas.height = image.height
                let context = canvas.getContext('2d')
                context.drawImage(image, 0, 0, image.width, image.height)
                let quality = 0.8
                let dataurl = canvas.toDataURL('image/png', quality)
                resolve(dataurl)
            }
            image.onerror = (e) => {
                reject(e)
            }
        } catch (e) {
            reject(e)
        }
    })
}

// 使用
await this.handleImg('https://rice-website.oss-cn-shanghai.aliyuncs.com/resource/a217e360-f520-4f13-9059-cdffa8f0af91.png')
// html2canvas可以把跨域的配置去掉了

问题2：当页面固定高度，内部滚动时，滚动到页面的下方再下载，下载的pdf上半部分会出现一片空白，并且下载的pdf页面也不完整

解决：下载的时候把页面滚到顶部（略显逊）

window.scrollTo(0, 0)

再见。