html2canvas 出现图片无法展示

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 

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 => {

})

在下载就不会空白了