生成pdf并下载

html2pdf.js

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

scss 复制代码
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:等待所有图片加载完成后再下载

javascript 复制代码
// 修改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(稍微麻烦点,但是也算解决了)

javascript 复制代码
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)
        }
    })
}
csharp 复制代码
// 使用
await this.handleImg('https://rice-website.oss-cn-shanghai.aliyuncs.com/resource/a217e360-f520-4f13-9059-cdffa8f0af91.png')
// html2canvas可以把跨域的配置去掉了

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

解决:下载的时候把页面滚到顶部(略显逊)

javascript 复制代码
window.scrollTo(0, 0)

再见。

相关推荐
知识分享小能手7 小时前
微信小程序入门学习教程,从入门到精通,微信小程序常用API(上)——知识点详解 + 案例实战(4)
前端·javascript·学习·微信小程序·小程序·html5·微信开放平台
清灵xmf8 小时前
CSS field-sizing 让表单「活」起来
前端·css·field-sizing
文火冰糖的硅基工坊8 小时前
[光学原理与应用-480]:《国产检测设备对比表》
前端·人工智能·系统架构·制造·半导体·产业链
excel8 小时前
Qiankun 子应用生命周期及使用场景解析
前端
weixin_446260858 小时前
Django - 让开发变得简单高效的Web框架
前端·数据库·django
蓝莓味的口香糖8 小时前
【JS】什么是单例模式
开发语言·javascript·单例模式
ObjectX前端实验室9 小时前
【react18原理探究实践】异步可中断 & 时间分片
前端·react.js
SoaringHeart9 小时前
Flutter进阶:自定义一个 json 转 model 工具
前端·flutter·dart
努力打怪升级9 小时前
Rocky Linux 8 远程管理配置指南(宿主机 VNC + KVM 虚拟机 VNC)
前端·chrome
brzhang10 小时前
AI Agent 干不好活,不是它笨,告诉你一个残忍的现实,是你给他的工具太难用了
前端·后端·架构