首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >​html2canvas 出现图片无法展示

​html2canvas 出现图片无法展示

作者头像
公众号---人生代码
发布2020-11-26 10:22:52
2.2K0
发布2020-11-26 10:22:52
举报
文章被收录于专栏:人生代码人生代码

html2canvas 出现图片无法展示

我有一个大胆的想法,我要一直写到死,那一天我不写了,可能就死了。哈哈。

哈喽,大家好,我是你们的攻城狮,人贱人爱的 Ken,一个永远充满激情的人。

最近接收到一个优化需求:就是对之前的行程文档的图文介绍添加打印生成 pdf 的功能

当然,我们需要依赖 html2canvas 和 jspdf.min.js 这两个库,html2canvas 是用于生成 canvas,jspdf.min.js 是用于生成 pdf 的。

首先我们需要引入 html2canvas, jspdf

// 导出页面为PDF格式
import html2Canvas from 'html2canvas'
import './jspdf.min.js'

我们将在 Vue 的原型上面添加一个全局方法,传入两个参数

1 selector 选择的元素

2 title 标题

判断选择的元素是否存在,不存在抛出错误,让用户知道

export default {
    install(Vue, options) {
        Vue.prototype.$_getpdf = function(selector, title='') {
            if(!selector) {
                throw new Error("缺少 selector")
            }
            let el = document.querySelector(selector)
            if(!el) {
                throw new Error('未找到' + selector + '对应的DOM节点')
            }
        }
    }
}

然后我们需要将这个元素生成 canvas:

export default {
    install(Vue, options) {
        Vue.prototype.$_getpdf = function(selector, title='') {
            if(!selector) {
                throw new Error("缺少 selector")
            }
            let el = document.querySelector(selector)
            if(!el) {
                throw new Error('未找到' + selector + '对应的DOM节点')
            }
            html2canvas(el, {
                dpi: 120, // 图片清晰度问题
            }).then(canvas => {
                
            })
        }
    }
}

因为我们这里需要进行分页打印,所以需要根据 a4 纸的大小进行计算:

export default {
    install(Vue, options) {
        Vue.prototype.$_getpdf = function(selector, title='') {
            if(!selector) {
                throw new Error("缺少 selector")
            }
            let el = document.querySelector(selector)
            if(!el) {
                throw new Error('未找到' + selector + '对应的DOM节点')
            }
            html2canvas(el, {
                dpi: 120, // 图片清晰度问题
            }).then(canvas => {
                let contentWidth = canvas.width // 画布的宽度
                let contentHeight = canvas.height // 画布的高度
                let pageHeight = contentWidth / 592.28 * 841.89 // 每一页的高度
                let leftHeight = contentHeight // 偏移的位置
                let position = 0
                let imgWidth = 595.28
                let imgHeight = 592.28 / contentWidth * contentHeight
                let pageData = canvas.toDataURL('image/jpeg', 1.0)
                let PDF = new jsPDF('', 'pt', 'a4')
                PDF.text(100, 100, '设置的表头的参数')
                let pageArr = []
                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
                    pageArr.push(position)
                    console.log('打印的页码数是多少', position)
                    if (leftHeight > 0) {
                      PDF.addPage()
                    }
                  }
                }
                console.log('打印页码数', pageArr)
                pageArr.forEach((val,index) => {

                  console.log('循环的数组', index)
                })
                PDF.save(title + '.pdf')
            })
        }
    }
}

这样我们就生成了代码。

注意点

就是一般我们打印的话,可能需要再写一份代码,或者一个组件,将所需要打印的数据传递进去,将这个组件定位到很远很远的地方,设置好宽度,样式代码如下:

.xschedule-print-wrap {
    position: fixed;
    background-color: #ffffff;
    top: -9999999px;
    width: 1487px;
}

然后我们点击右下角的下载 PDF 按钮,我们可以看到我们已经把 pdf 下载好了,一开始如果我们没有开启上面的 useCORS,图片会是一段空白

开启之后:

html2canvas(el, {
    dpi: 120, // 图片清晰度问题
    useCORS:true, // 支持跨域打印图片
}).then(canvas => {

})

在下载就不会空白了

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-11-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 CryptoCode 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • html2canvas 出现图片无法展示
  • 注意点
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档