vue页面转化成pdf文件

遇到的问题 oss图片转化跨域问题

1、引入依赖包

import html2canvas from 'html2canvas';

import JsPDF from 'jspdf';

function html2pdf (element, fileName) {

// 网络图片跨域处理useCORS: true

html2canvas(element, { useCORS: true }).then(canvas => {

const contentWidth = canvas.width

const contentHeight = canvas.height

const pageHeight = contentWidth / 592.28 * 841.89

let leftHeight = contentHeight

let position = 0

const imgWidth = 595.28

const imgHeight = 592.28 / contentWidth * contentHeight

const pageData = canvas.toDataURL('image/jpeg', 1.0)

const PDF = new JsPDF('', 'pt', 'a4')

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

if (leftHeight > 0) {

PDF.addPage()

}

}

}

PDF.save(fileName + '.pdf')

})

}

2、跨域问题，图片跨域处理

export function base64 (url) {

return new Promise((resolve) => {

const image = new Image()

// 先设置图片跨域属性

image.crossOrigin = 'Anonymous'

// 再给image赋值src属性，先后顺序不能颠倒

image.src = url

image.onload = function () {

const canvas = document.createElement('CANVAS')

// 设置canvas宽高等于图片实际宽高

canvas.width = image.width

canvas.height = image.height

canvas.getContext('2d').drawImage(image, 0, 0)

// toDataUrl可以接收2个参数，参数一：图片类型，参数二： 图片质量0-1（不传默认为0.92）

const dataURL = canvas.toDataURL('image/jpeg')

resolve(dataURL)

}

image.onerror = () => {

resolve({ message: '相片处理失败' })

}

})

}