vue组件生成pdf文件流下载，并上传到后端

最新推荐文章于 2024-06-18 14:30:43 发布

@小文文

最新推荐文章于 2024-06-18 14:30:43 发布

阅读量869

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/u014409941/article/details/132605722

版权

文章介绍了如何使用html2Canvas和JsPDF库将HTML内容转换为PDF格式，同时提供上传功能，将生成的PDF作为文件通过axios发送到服务器。

摘要由CSDN通过智能技术生成

<el-button type=“primary” @click=“taskBase64”> 上传报告
<el-button @click=“downLoad” type=“primary”>下载报告

// 上传
taskBase64() {
let title =“报告”
let download = true
const obj = {id： 11111}
this.getPdf(title,download,obj.id)
},

// 下载
downLoad () {
  let title ="报告"
  let  download = false
  const obj = {id： 11111}
  this.getPdf(title,download,obj.id)
},

htmlToPdf.js 文件
// 导出页面为PDF格式
import html2Canvas from ‘html2canvas’
import JsPDF from ‘jspdf’
import axios from ‘axios’;
// 解决导出文件pdf文件展示的内容不全问题
export default {
install(Vue, options) {
Vue.prototype.getPdf = function (reportName, isDownload,id) {
return new Promise((resolve, reject) => {
let title = reportName
html2Canvas(document.querySelector(‘#pdfDom’), {
allowTaint: true,
scale: 2,
height: document.getElementById(‘pdfDom’).scrollHeight,
windowHeight: document.getElementById(‘pdfDom’).scrollHeight + 80
}).then((canvas) => {
let contentWidth = canvas.width * 2
let contentHeight = canvas.height * 2
//一页pdf显示html页面生成的canvas高度;
let pageHeight = contentWidth / 592.28 * 841.89
//未生成pdf的html页面高度
let leftHeight = contentHeight
//页面偏移
let position = 0
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
let imgWidth = 595.28
let imgHeight = 592.28 / contentWidth * contentHeight
let pageData = canvas.toDataURL(‘image/jpeg’, 1.0)
let PDF = new JsPDF(‘’, ‘pt’, ‘a4’)
//有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
//当内容未超过pdf一页显示的范围，无需分页
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()
}
}
}
if (isDownload === false) {
PDF.save(title + ‘.pdf’)
}
// 删除本地存储的base64字段
let pdfData = PDF.output(‘datauristring’)//获取base64Pdf
//拿到base64的pdf
let pdfBase64Str = pdfData;
let title =“报告”
var arr = pdfBase64Str.split(“,”),
mime = arr[0].match(/😦.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n–) {
u8arr[n] = bstr.charCodeAt(n);
}
var myfile = new File([u8arr], title, { type: mime });
var formdata = new FormData();
formdata.append(“file”, myfile); // 文件对象
formdata.append(“id”, id); // ID
console.log(‘formdata’,myfile)
axios.post(‘/api/pair/pairdev/networkplane/taskonfile’,formdata, {
headers: { ‘Content-Type’: ‘multipart/form-data’ }
}).then((res) => {
if (res.code === ‘0000’) {
this. $KaTeX parse error: Expected 'EOF', got '}' at position 41: \dots }̲ else { \dots$ message.err(res.tip);
}
}).catch((err) => {
})
//
resolve(pdfData)
}
)
})
}
}
}