生成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)

再见。

相关推荐
天***88966 分钟前
Chrome扩展安装插件教程,Edge安装插件扩展教程,浏览器安装扩展程序方法
前端·chrome·edge
心.c36 分钟前
深拷贝浅拷贝
开发语言·前端·javascript·ecmascript
IT_陈寒1 小时前
Vue 3.4性能优化实战:5个鲜为人知的Composition API技巧让打包体积减少40%
前端·人工智能·后端
前端九哥1 小时前
💻【急招!27届前端实习生】广州4399实习太幸福了!江景+三餐+健身房全都有😭
前端·面试·招聘
咖啡の猫1 小时前
Vue全局事件总线
前端·javascript·vue.js
Lovereo2 小时前
我的目标检测性能优化之路:预算不够、GPU 没有、但性能我得要
前端
T___T2 小时前
JavaScript 变量声明详解:var、let、const 的核心差异
javascript·面试
蒙娜丽宁2 小时前
Rust 与 WebAssembly:构建高效前端应用的全流程复盘
前端·rust·wasm
这儿有一堆花2 小时前
使用 Actix-web 开发高性能 Web 服务
前端·数据库
豆苗学前端2 小时前
10分钟带你入门websocket,并实现一个在线多人聊天室
前端·javascript·后端