业务联系单pdf导出
This commit is contained in:
parent
0e4b980e49
commit
dde99b5a4c
|
|
@ -275,6 +275,7 @@
|
|||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="print">打 印</el-button>
|
||||
<el-button type="success" icon="el-icon-download" @click="downloadPDF">下载PDF</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
|
@ -554,6 +555,77 @@ export default {
|
|||
console.error('生成单据错误:', error)
|
||||
})
|
||||
},
|
||||
|
||||
// 下载PDF
|
||||
async downloadPDF() {
|
||||
try {
|
||||
this.$modal.loading('正在生成PDF，请稍候...')
|
||||
|
||||
// 获取要转换的DOM元素
|
||||
const element = document.getElementById('print-content')
|
||||
if (!element) {
|
||||
this.$modal.closeLoading()
|
||||
this.$message.error('未找到要导出的内容')
|
||||
return
|
||||
}
|
||||
|
||||
// 使用html2canvas将DOM元素转换为canvas
|
||||
const canvas = await html2canvas(element, {
|
||||
scale: 2, // 提高清晰度
|
||||
useCORS: true, // 允许加载跨域图片
|
||||
allowTaint: true,
|
||||
logging: false, // 关闭日志记录
|
||||
backgroundColor: '#ffffff'
|
||||
})
|
||||
|
||||
// 创建PDF文档
|
||||
const pdf = new jsPDF('p', 'mm', 'a4')
|
||||
|
||||
// 获取canvas的宽度和高度
|
||||
const imgWidth = 210 // A4纸的宽度(mm)
|
||||
const pageHeight = 297 // A4纸的高度(mm)
|
||||
const imgHeight = (canvas.height * imgWidth) / canvas.width
|
||||
|
||||
let heightLeft = imgHeight
|
||||
let position = 0
|
||||
|
||||
// 将canvas转换为图片
|
||||
const imgData = canvas.toDataURL('image/jpeg', 1.0)
|
||||
|
||||
// 如果内容超过一页，需要分页
|
||||
if (heightLeft > pageHeight) {
|
||||
// 第一页
|
||||
pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight)
|
||||
heightLeft -= pageHeight
|
||||
|
||||
// 添加后续页面
|
||||
while (heightLeft > 0) {
|
||||
position = heightLeft - imgHeight
|
||||
pdf.addPage()
|
||||
pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight)
|
||||
heightLeft -= pageHeight
|
||||
}
|
||||
} else {
|
||||
// 单页内容
|
||||
pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight)
|
||||
}
|
||||
|
||||
// 生成PDF文件名
|
||||
const fileName = `业务联系单_${this.dialogForm.code || '未命名'}_${new Date().getTime()}.pdf`
|
||||
|
||||
// 下载PDF
|
||||
pdf.save(fileName)
|
||||
|
||||
this.$modal.closeLoading()
|
||||
this.$message.success('PDF下载成功')
|
||||
} catch (error) {
|
||||
console.error('生成PDF失败:', error)
|
||||
this.$modal.closeLoading()
|
||||
this.$message.error('生成PDF失败，请稍后重试')
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
// 获取弹框内容
|
||||
async getDialogContent(row) {
|
||||
console.log('🚀 ~ getDialogContent ~ row:', row.taskId)
|
||||
|
|
|
|||
|
|
@ -250,7 +250,7 @@
|
|||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="print">打 印</el-button>
|
||||
<!-- <el-button type="primary" @click="">查看PDF</el-button> -->
|
||||
<el-button type="success" icon="el-icon-download" @click="downloadPDF">下载PDF</el-button>
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
|
@ -272,6 +272,8 @@ import {
|
|||
import { getLeaseTask, getCodePDF } from '@/api/business/index'
|
||||
import vueEasyPrint from "vue-easy-print";
|
||||
import printJS from 'print-js';
|
||||
import html2canvas from 'html2canvas';
|
||||
import jsPDF from 'jspdf';
|
||||
|
||||
export default {
|
||||
name: "Home",
|
||||
|
|
@ -525,6 +527,75 @@ export default {
|
|||
})
|
||||
},
|
||||
|
||||
// 下载PDF
|
||||
async downloadPDF() {
|
||||
try {
|
||||
this.$modal.loading('正在生成PDF，请稍候...')
|
||||
|
||||
// 获取要转换的DOM元素
|
||||
const element = document.getElementById('print-content1')
|
||||
if (!element) {
|
||||
this.$modal.closeLoading()
|
||||
this.$message.error('未找到要导出的内容')
|
||||
return
|
||||
}
|
||||
|
||||
// 使用html2canvas将DOM元素转换为canvas
|
||||
const canvas = await html2canvas(element, {
|
||||
scale: 2, // 提高清晰度
|
||||
useCORS: true, // 允许加载跨域图片
|
||||
allowTaint: true,
|
||||
logging: false, // 关闭日志记录
|
||||
backgroundColor: '#ffffff'
|
||||
})
|
||||
|
||||
// 创建PDF文档
|
||||
const pdf = new jsPDF('p', 'mm', 'a4')
|
||||
|
||||
// 获取canvas的宽度和高度
|
||||
const imgWidth = 210 // A4纸的宽度(mm)
|
||||
const pageHeight = 297 // A4纸的高度(mm)
|
||||
const imgHeight = (canvas.height * imgWidth) / canvas.width
|
||||
|
||||
let heightLeft = imgHeight
|
||||
let position = 0
|
||||
|
||||
// 将canvas转换为图片
|
||||
const imgData = canvas.toDataURL('image/jpeg', 1.0)
|
||||
|
||||
// 如果内容超过一页，需要分页
|
||||
if (heightLeft > pageHeight) {
|
||||
// 第一页
|
||||
pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight)
|
||||
heightLeft -= pageHeight
|
||||
|
||||
// 添加后续页面
|
||||
while (heightLeft > 0) {
|
||||
position = heightLeft - imgHeight
|
||||
pdf.addPage()
|
||||
pdf.addImage(imgData, 'JPEG', 0, position, imgWidth, imgHeight)
|
||||
heightLeft -= pageHeight
|
||||
}
|
||||
} else {
|
||||
// 单页内容
|
||||
pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight)
|
||||
}
|
||||
|
||||
// 生成PDF文件名
|
||||
const fileName = `业务联系单_${this.dialogForm.code || '未命名'}_${new Date().getTime()}.pdf`
|
||||
|
||||
// 下载PDF
|
||||
pdf.save(fileName)
|
||||
|
||||
this.$modal.closeLoading()
|
||||
this.$message.success('PDF下载成功')
|
||||
} catch (error) {
|
||||
console.error('生成PDF失败:', error)
|
||||
this.$modal.closeLoading()
|
||||
this.$message.error('生成PDF失败，请稍后重试')
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue