功能优化：实现单据PDF生成功能并上传到服务器
This commit is contained in:
syruan
parent
5caa60fe25
commit
aaaeee7b5b
|
|
@ -51,6 +51,7 @@
|
|||
"js-beautify": "1.13.0",
|
||||
"js-cookie": "3.0.1",
|
||||
"jsencrypt": "3.0.0-rc.1",
|
||||
"jspdf": "^3.0.1",
|
||||
"jszip": "^3.10.1",
|
||||
"nprogress": "0.2.0",
|
||||
"print-js": "^1.6.0",
|
||||
|
|
|
|||
|
|
@ -254,7 +254,6 @@
|
|||
</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 @click="dialogVisible = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
|
@ -264,6 +263,9 @@
|
|||
<script>
|
||||
import printJS from 'print-js'
|
||||
import { getLeaseTaskList, deleteLeaseTask, getLeaseTask, getCodePDF } from '@/api/business/index'
|
||||
import html2canvas from 'html2canvas';
|
||||
import jsPDF from 'jspdf';
|
||||
import request from "@/utils/request";
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
|
|
@ -420,17 +422,86 @@ export default {
|
|||
},
|
||||
// 打印
|
||||
print() {
|
||||
const element = document.getElementById('print-content');
|
||||
|
||||
// 确保元素存在
|
||||
if (!element) {
|
||||
this.$message.error('未找到要打印的元素');
|
||||
return;
|
||||
}
|
||||
|
||||
this.$modal.loading('正在生成单据，请稍候...');
|
||||
|
||||
// 使用html2canvas将DOM元素转换为canvas
|
||||
html2canvas(element, {
|
||||
scale: 2, // 提高清晰度
|
||||
useCORS: true, // 允许加载跨域图片
|
||||
allowTaint: true,
|
||||
backgroundColor: '#ffffff'
|
||||
}).then(canvas => {
|
||||
// 创建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;
|
||||
|
||||
// 将canvas转换为图片
|
||||
const imgData = canvas.toDataURL('image/jpeg', 1.0);
|
||||
|
||||
// 添加图片到PDF
|
||||
pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight);
|
||||
|
||||
// 生成PDF文件名
|
||||
const fileName = `业务联系单_${this.dialogForm.code || '未命名'}_${new Date().getTime()}.pdf`;
|
||||
|
||||
// 将PDF转换为Blob对象
|
||||
const pdfBlob = pdf.output('blob');
|
||||
|
||||
// 创建FormData对象用于上传
|
||||
const formData = new FormData();
|
||||
formData.append('file', pdfBlob, fileName);
|
||||
formData.append('id', this.dialogForm.leaseProjectId);
|
||||
|
||||
// 上传到服务器
|
||||
this.$modal.closeLoading();
|
||||
|
||||
// 调用上传API - 使用request
|
||||
request.post('/material/leaseTask/uploadPdf', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
}).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$modal.msgSuccess('单据文件已保存到服务器');
|
||||
|
||||
// 上传成功后执行打印
|
||||
printJS({
|
||||
printable: 'print-content',
|
||||
type: 'html', //
|
||||
// targetStyles: ['*'], // 打印的元素样式
|
||||
scanStyles: false, // 是否扫描页面样式
|
||||
// css: [
|
||||
// 'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // Element UI 的样式表
|
||||
// ],
|
||||
type: 'html',
|
||||
scanStyles: false,
|
||||
maxWidth: '1400'
|
||||
// 其他配置选项
|
||||
})
|
||||
});
|
||||
} else {
|
||||
this.$modal.msgError('保存单据文件失败');
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$modal.msgError('上传单据文件时发生错误');
|
||||
|
||||
// 即使上传失败也执行打印
|
||||
printJS({
|
||||
printable: 'print-content',
|
||||
type: 'html',
|
||||
scanStyles: false,
|
||||
maxWidth: '1400'
|
||||
});
|
||||
});
|
||||
}).catch(error => {
|
||||
this.$modal.closeLoading();
|
||||
this.$modal.msgError('生成单据时发生错误');
|
||||
console.error('生成单据错误:', error);
|
||||
});
|
||||
},
|
||||
// 获取弹框内容
|
||||
async getDialogContent(row) {
|
||||
|
|
|
|||
|
|
@ -178,6 +178,10 @@ import {
|
|||
getBackApplyInfo,
|
||||
updatePrintStatus,
|
||||
} from '@/api/back/index.js'
|
||||
import html2canvas from 'html2canvas';
|
||||
import jsPDF from 'jspdf';
|
||||
import printJS from 'print-js';
|
||||
import request from "@/utils/request";
|
||||
// import { getViewByApply,materialReturnNoteByApply } from "@/api/claimAndRefund/return.js"
|
||||
export default {
|
||||
components: { vueEasyPrint },
|
||||
|
|
@ -246,26 +250,151 @@ export default {
|
|||
cancel() {
|
||||
this.dialogShowFlag = false;
|
||||
},
|
||||
|
||||
|
||||
|
||||
print() {
|
||||
// this.$refs.printRef.print();
|
||||
const element = document.getElementById('checkId');
|
||||
|
||||
// 确保元素存在
|
||||
if (!element) {
|
||||
this.$message.error('未找到要打印的元素');
|
||||
return;
|
||||
}
|
||||
|
||||
this.$modal.loading('正在生成单据，请稍候...');
|
||||
|
||||
// 查找页面中所有图片并预加载
|
||||
const images = element.querySelectorAll('img');
|
||||
const imagePromises = [];
|
||||
|
||||
// 为每个图片创建加载或错误处理的Promise
|
||||
images.forEach(img => {
|
||||
// 如果图片已经加载完成，不需要处理
|
||||
if (img.complete) return;
|
||||
|
||||
const promise = new Promise((resolve) => {
|
||||
const originalSrc = img.src;
|
||||
|
||||
// 图片加载成功
|
||||
img.onload = function() {
|
||||
resolve();
|
||||
};
|
||||
|
||||
// 图片加载失败，使用空白图片替代
|
||||
img.onerror = function() {
|
||||
console.log('图片加载失败，使用空白图片替代:', originalSrc);
|
||||
img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; // 透明1x1像素图片
|
||||
resolve();
|
||||
};
|
||||
});
|
||||
|
||||
imagePromises.push(promise);
|
||||
});
|
||||
|
||||
// 等待所有图片加载完成或失败后再生成PDF
|
||||
Promise.all(imagePromises).then(() => {
|
||||
// 使用html2canvas将DOM元素转换为canvas
|
||||
html2canvas(element, {
|
||||
scale: 2, // 提高清晰度
|
||||
useCORS: true, // 允许加载跨域图片
|
||||
allowTaint: true,
|
||||
ignoreElements: (element) => {
|
||||
// 忽略所有图片加载错误
|
||||
return element.nodeName === 'IMG' && !element.complete;
|
||||
},
|
||||
logging: false, // 关闭日志记录
|
||||
imageTimeout: 3000, // 图片加载超时时间
|
||||
backgroundColor: '#ffffff'
|
||||
}).then(canvas => {
|
||||
// 创建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;
|
||||
|
||||
// 将canvas转换为图片
|
||||
const imgData = canvas.toDataURL('image/jpeg', 1.0);
|
||||
|
||||
// 添加图片到PDF
|
||||
pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight);
|
||||
|
||||
// 生成PDF文件名
|
||||
const fileName = `退料单_${this.rowObj.code || '未命名'}_${new Date().getTime()}.pdf`;
|
||||
|
||||
// 将PDF转换为Blob对象
|
||||
const pdfBlob = pdf.output('blob');
|
||||
|
||||
// 创建FormData对象用于上传
|
||||
const formData = new FormData();
|
||||
formData.append('file', pdfBlob, fileName);
|
||||
formData.append('id', this.rowObj.proId);
|
||||
|
||||
// 上传到服务器
|
||||
this.$modal.closeLoading();
|
||||
|
||||
// 调用上传API - 使用request
|
||||
request.post('/material/back_apply_info/uploadPdf', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
}).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$modal.msgSuccess('单据文件已保存到服务器');
|
||||
|
||||
// 上传成功后执行打印
|
||||
printJS({
|
||||
printable: 'checkId',
|
||||
type: 'html',
|
||||
targetStyles: ['*'],
|
||||
maxWidth:'1400'
|
||||
// 其他配置选项
|
||||
});
|
||||
console.log(this.rowObj)
|
||||
|
||||
// 更新打印状态
|
||||
updatePrintStatus(this.rowObj.id).then(response => {
|
||||
if (response.code === 200) {
|
||||
//this.$modal.msgSuccess("打印成功");
|
||||
// 如果需要刷新列表
|
||||
this.$emit('refresh');
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$modal.msgError("打印状态更新失败");
|
||||
});
|
||||
} else {
|
||||
this.$modal.msgError('保存单据文件失败');
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$modal.msgError('上传单据文件时发生错误');
|
||||
|
||||
// 即使上传失败也执行打印
|
||||
printJS({
|
||||
printable: 'checkId',
|
||||
type: 'html',
|
||||
targetStyles: ['*'],
|
||||
maxWidth:'1400'
|
||||
});
|
||||
|
||||
// 更新打印状态
|
||||
updatePrintStatus(this.rowObj.id).then(response => {
|
||||
if (response.code === 200) {
|
||||
// 如果需要刷新列表
|
||||
this.$emit('refresh');
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$modal.msgError("打印状态更新失败");
|
||||
});
|
||||
});
|
||||
}).catch(error => {
|
||||
this.$modal.closeLoading();
|
||||
this.$modal.msgError('生成单据时发生错误');
|
||||
console.error('生成单据错误:', error);
|
||||
});
|
||||
}).catch(error => {
|
||||
this.$modal.closeLoading();
|
||||
this.$modal.msgError('处理图片时发生错误');
|
||||
console.error('处理图片错误:', error);
|
||||
});
|
||||
},
|
||||
checkDetail(row) {
|
||||
this.title = '查看'
|
||||
|
|
@ -273,13 +402,126 @@ export default {
|
|||
this.open = true
|
||||
},
|
||||
remarksPrint() {
|
||||
// this.$refs.remarksPrintRef.print();
|
||||
const element = document.getElementById('checkIdTwo');
|
||||
|
||||
// 确保元素存在
|
||||
if (!element) {
|
||||
this.$message.error('未找到要打印的元素');
|
||||
return;
|
||||
}
|
||||
|
||||
this.$modal.loading('正在生成单据，请稍候...');
|
||||
|
||||
// 查找页面中所有图片并预加载
|
||||
const images = element.querySelectorAll('img');
|
||||
const imagePromises = [];
|
||||
|
||||
// 为每个图片创建加载或错误处理的Promise
|
||||
images.forEach(img => {
|
||||
// 如果图片已经加载完成，不需要处理
|
||||
if (img.complete) return;
|
||||
|
||||
const promise = new Promise((resolve) => {
|
||||
const originalSrc = img.src;
|
||||
|
||||
// 图片加载成功
|
||||
img.onload = function() {
|
||||
resolve();
|
||||
};
|
||||
|
||||
// 图片加载失败，使用空白图片替代
|
||||
img.onerror = function() {
|
||||
console.log('图片加载失败，使用空白图片替代:', originalSrc);
|
||||
img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; // 透明1x1像素图片
|
||||
resolve();
|
||||
};
|
||||
});
|
||||
|
||||
imagePromises.push(promise);
|
||||
});
|
||||
|
||||
// 等待所有图片加载完成或失败后再生成PDF
|
||||
Promise.all(imagePromises).then(() => {
|
||||
// 使用html2canvas将DOM元素转换为canvas
|
||||
html2canvas(element, {
|
||||
scale: 2, // 提高清晰度
|
||||
useCORS: true, // 允许加载跨域图片
|
||||
allowTaint: true,
|
||||
ignoreElements: (element) => {
|
||||
// 忽略所有图片加载错误
|
||||
return element.nodeName === 'IMG' && !element.complete;
|
||||
},
|
||||
logging: false, // 关闭日志记录
|
||||
imageTimeout: 3000, // 图片加载超时时间
|
||||
backgroundColor: '#ffffff'
|
||||
}).then(canvas => {
|
||||
// 创建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;
|
||||
|
||||
// 将canvas转换为图片
|
||||
const imgData = canvas.toDataURL('image/jpeg', 1.0);
|
||||
|
||||
// 添加图片到PDF
|
||||
pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight);
|
||||
|
||||
// 生成PDF文件名
|
||||
const fileName = `退料编码明细_${this.rowObj.code || '未命名'}_${new Date().getTime()}.pdf`;
|
||||
|
||||
// 将PDF转换为Blob对象
|
||||
const pdfBlob = pdf.output('blob');
|
||||
|
||||
// 创建FormData对象用于上传
|
||||
const formData = new FormData();
|
||||
formData.append('file', pdfBlob, fileName);
|
||||
formData.append('id', this.rowObj.proId);
|
||||
|
||||
// 上传到服务器
|
||||
this.$modal.closeLoading();
|
||||
|
||||
// 调用上传API - 使用request
|
||||
request.post('/material/back_apply_info/uploadPdf', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
}).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$modal.msgSuccess('单据PDF文件已保存到服务器');
|
||||
|
||||
// 上传成功后执行打印
|
||||
printJS({
|
||||
printable: 'checkIdTwo',
|
||||
type: 'html',
|
||||
targetStyles: ['*'],
|
||||
maxWidth:'1400'
|
||||
// 其他配置选项
|
||||
});
|
||||
} else {
|
||||
this.$modal.msgError('保存明细单据文件失败');
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$modal.msgError('上传明细单据文件时发生错误');
|
||||
|
||||
// 即使上传失败也执行打印
|
||||
printJS({
|
||||
printable: 'checkIdTwo',
|
||||
type: 'html',
|
||||
targetStyles: ['*'],
|
||||
maxWidth:'1400'
|
||||
});
|
||||
});
|
||||
}).catch(error => {
|
||||
this.$modal.closeLoading();
|
||||
this.$modal.msgError('生成单据时发生错误');
|
||||
console.error('生成单据错误:', error);
|
||||
});
|
||||
}).catch(error => {
|
||||
this.$modal.closeLoading();
|
||||
this.$modal.msgError('处理图片时发生错误');
|
||||
console.error('处理图片错误:', error);
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -326,6 +326,9 @@ import {
|
|||
|
||||
import vueEasyPrint from "vue-easy-print";
|
||||
import printJS from 'print-js';
|
||||
import html2canvas from 'html2canvas';
|
||||
import jsPDF from 'jspdf';
|
||||
import request from "@/utils/request";
|
||||
|
||||
export default {
|
||||
name: "Home",
|
||||
|
|
@ -428,6 +431,8 @@ export default {
|
|||
this.multiple = !selection.length;
|
||||
},
|
||||
|
||||
|
||||
|
||||
//是否可用勾选框
|
||||
selectable(row) {
|
||||
if (row.taskStatus == 1) {
|
||||
|
|
@ -559,12 +564,134 @@ export default {
|
|||
|
||||
//出库检验单打印
|
||||
printCheck() {
|
||||
const element = document.getElementById('checkId');
|
||||
|
||||
// 确保元素存在
|
||||
if (!element) {
|
||||
this.$message.error('未找到要打印的元素');
|
||||
return;
|
||||
}
|
||||
|
||||
this.$modal.loading('正在生成单据，请稍候...');
|
||||
|
||||
// 查找页面中所有图片并预加载
|
||||
const images = element.querySelectorAll('img');
|
||||
const imagePromises = [];
|
||||
|
||||
// 为每个图片创建加载或错误处理的Promise
|
||||
images.forEach(img => {
|
||||
// 如果图片已经加载完成，不需要处理
|
||||
if (img.complete) return;
|
||||
|
||||
const promise = new Promise((resolve) => {
|
||||
const originalSrc = img.src;
|
||||
|
||||
// 图片加载成功
|
||||
img.onload = function() {
|
||||
resolve();
|
||||
};
|
||||
|
||||
// 图片加载失败，使用空白图片替代
|
||||
img.onerror = function() {
|
||||
console.log('图片加载失败，使用空白图片替代:', originalSrc);
|
||||
img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; // 透明1x1像素图片
|
||||
resolve();
|
||||
};
|
||||
});
|
||||
|
||||
imagePromises.push(promise);
|
||||
});
|
||||
|
||||
// 等待所有图片加载完成或失败后再生成PDF
|
||||
Promise.all(imagePromises).then(() => {
|
||||
// 使用html2canvas将DOM元素转换为canvas
|
||||
html2canvas(element, {
|
||||
scale: 2, // 提高清晰度
|
||||
useCORS: true, // 允许加载跨域图片
|
||||
allowTaint: true,
|
||||
ignoreElements: (element) => {
|
||||
// 忽略所有图片加载错误
|
||||
return element.nodeName === 'IMG' && !element.complete;
|
||||
},
|
||||
logging: false, // 关闭日志记录
|
||||
imageTimeout: 3000, // 图片加载超时时间
|
||||
backgroundColor: '#ffffff'
|
||||
}).then(canvas => {
|
||||
// 创建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;
|
||||
|
||||
// 将canvas转换为图片
|
||||
const imgData = canvas.toDataURL('image/jpeg', 1.0);
|
||||
|
||||
// 添加图片到PDF
|
||||
pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight);
|
||||
|
||||
// 生成PDF文件名
|
||||
const fileName = `出库检验单_${this.checkDataInfo.leaseProject || '未命名'}_${new Date().getTime()}.pdf`;
|
||||
|
||||
// 将PDF转换为Blob对象
|
||||
const pdfBlob = pdf.output('blob');
|
||||
|
||||
// 创建FormData对象用于上传
|
||||
const formData = new FormData();
|
||||
formData.append('file', pdfBlob, fileName);
|
||||
formData.append('id', this.idTemp);
|
||||
|
||||
// 上传到服务器
|
||||
this.$modal.closeLoading();
|
||||
|
||||
// 调用上传API - 使用request
|
||||
request.post('/material/lease_apply_info/uploadCheckPdf', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
}).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$modal.msgSuccess('单据文件已保存到服务器');
|
||||
|
||||
// 上传成功后执行打印
|
||||
printJS({
|
||||
printable: 'checkId',
|
||||
type: 'html',
|
||||
targetStyles: ['*'],
|
||||
maxWidth:'1400'
|
||||
// 其他配置选项
|
||||
});
|
||||
} else {
|
||||
this.$modal.msgError('保存单据文件失败');
|
||||
|
||||
// 即使保存失败也执行打印
|
||||
printJS({
|
||||
printable: 'checkId',
|
||||
type: 'html',
|
||||
targetStyles: ['*'],
|
||||
maxWidth:'1400'
|
||||
});
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$modal.msgError('上传单据文件时发生错误');
|
||||
|
||||
// 即使上传失败也执行打印
|
||||
printJS({
|
||||
printable: 'checkId',
|
||||
type: 'html',
|
||||
targetStyles: ['*'],
|
||||
maxWidth:'1400'
|
||||
});
|
||||
});
|
||||
}).catch(error => {
|
||||
this.$modal.closeLoading();
|
||||
this.$modal.msgError('生成单据时发生错误');
|
||||
console.error('生成PDF错误:', error);
|
||||
});
|
||||
}).catch(error => {
|
||||
this.$modal.closeLoading();
|
||||
this.$modal.msgError('处理图片时发生错误');
|
||||
console.error('处理图片错误:', error);
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -579,20 +706,256 @@ export default {
|
|||
this.getListViewInfo = row.maCodeVoList;
|
||||
},
|
||||
|
||||
//打印
|
||||
//打印明细
|
||||
printView() {
|
||||
const element = document.getElementById('remarksPrintRefView');
|
||||
|
||||
// 确保元素存在
|
||||
if (!element) {
|
||||
this.$message.error('未找到要打印的元素');
|
||||
return;
|
||||
}
|
||||
|
||||
this.$modal.loading('正在生成单据，请稍候...');
|
||||
|
||||
// 查找页面中所有图片并预加载
|
||||
const images = element.querySelectorAll('img');
|
||||
const imagePromises = [];
|
||||
|
||||
// 为每个图片创建加载或错误处理的Promise
|
||||
images.forEach(img => {
|
||||
// 如果图片已经加载完成，不需要处理
|
||||
if (img.complete) return;
|
||||
|
||||
const promise = new Promise((resolve) => {
|
||||
const originalSrc = img.src;
|
||||
|
||||
// 图片加载成功
|
||||
img.onload = function() {
|
||||
resolve();
|
||||
};
|
||||
|
||||
// 图片加载失败，使用空白图片替代
|
||||
img.onerror = function() {
|
||||
console.log('图片加载失败，使用空白图片替代:', originalSrc);
|
||||
img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; // 透明1x1像素图片
|
||||
resolve();
|
||||
};
|
||||
});
|
||||
|
||||
imagePromises.push(promise);
|
||||
});
|
||||
|
||||
// 等待所有图片加载完成或失败后再生成PDF
|
||||
Promise.all(imagePromises).then(() => {
|
||||
// 使用html2canvas将DOM元素转换为canvas
|
||||
html2canvas(element, {
|
||||
scale: 2, // 提高清晰度
|
||||
useCORS: true, // 允许加载跨域图片
|
||||
allowTaint: true,
|
||||
ignoreElements: (element) => {
|
||||
// 忽略所有图片加载错误
|
||||
return element.nodeName === 'IMG' && !element.complete;
|
||||
},
|
||||
logging: false, // 关闭日志记录
|
||||
imageTimeout: 3000, // 图片加载超时时间
|
||||
backgroundColor: '#ffffff'
|
||||
}).then(canvas => {
|
||||
// 创建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;
|
||||
|
||||
// 将canvas转换为图片
|
||||
const imgData = canvas.toDataURL('image/jpeg', 1.0);
|
||||
|
||||
// 添加图片到PDF
|
||||
pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight);
|
||||
|
||||
// 生成PDF文件名
|
||||
const fileName = `领料单编号明细_${new Date().getTime()}.pdf`;
|
||||
|
||||
// 将PDF转换为Blob对象
|
||||
const pdfBlob = pdf.output('blob');
|
||||
|
||||
// 创建FormData对象用于上传
|
||||
const formData = new FormData();
|
||||
formData.append('file', pdfBlob, fileName);
|
||||
formData.append('id', this.leaseApplyData.leaseProjectId);
|
||||
|
||||
// 上传到服务器
|
||||
this.$modal.closeLoading();
|
||||
|
||||
// 调用上传API - 使用request
|
||||
request.post('/material/lease_apply_info/uploadDetailPdf', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
}).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$modal.msgSuccess('单据文件已保存到服务器');
|
||||
|
||||
// 上传成功后执行打印
|
||||
this.$refs.remarksPrintRefView.print();
|
||||
} else {
|
||||
this.$modal.msgError('保存单据文件失败');
|
||||
|
||||
// 即使保存失败也执行打印
|
||||
this.$refs.remarksPrintRefView.print();
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$modal.msgError('上传单据文件时发生错误');
|
||||
|
||||
// 即使上传失败也执行打印
|
||||
this.$refs.remarksPrintRefView.print();
|
||||
});
|
||||
}).catch(error => {
|
||||
this.$modal.closeLoading();
|
||||
this.$modal.msgError('生成单据时发生错误');
|
||||
console.error('生成单据错误:', error);
|
||||
});
|
||||
}).catch(error => {
|
||||
this.$modal.closeLoading();
|
||||
this.$modal.msgError('处理图片时发生错误');
|
||||
console.error('处理图片错误:', error);
|
||||
});
|
||||
},
|
||||
|
||||
//打印
|
||||
print() {
|
||||
// this.$refs.remarksPrintRef.print();
|
||||
console.log("正在执行领料单打印操作");
|
||||
|
||||
const element = document.getElementById('checkIdTwo');
|
||||
|
||||
// 确保元素存在
|
||||
if (!element) {
|
||||
this.$message.error('未找到要打印的元素');
|
||||
return;
|
||||
}
|
||||
|
||||
this.$modal.loading('正在生成单据，请稍候...');
|
||||
|
||||
// 查找页面中所有图片并预加载
|
||||
const images = element.querySelectorAll('img');
|
||||
const imagePromises = [];
|
||||
|
||||
// 为每个图片创建加载或错误处理的Promise
|
||||
images.forEach(img => {
|
||||
// 如果图片已经加载完成，不需要处理
|
||||
if (img.complete) return;
|
||||
|
||||
const promise = new Promise((resolve) => {
|
||||
const originalSrc = img.src;
|
||||
|
||||
// 图片加载成功
|
||||
img.onload = function() {
|
||||
resolve();
|
||||
};
|
||||
|
||||
// 图片加载失败，使用空白图片替代
|
||||
img.onerror = function() {
|
||||
console.log('图片加载失败，使用空白图片替代:', originalSrc);
|
||||
img.src = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='; // 透明1x1像素图片
|
||||
resolve();
|
||||
};
|
||||
});
|
||||
|
||||
imagePromises.push(promise);
|
||||
});
|
||||
|
||||
// 等待所有图片加载完成或失败后再生成PDF
|
||||
Promise.all(imagePromises).then(() => {
|
||||
// 使用html2canvas将DOM元素转换为canvas
|
||||
html2canvas(element, {
|
||||
scale: 2, // 提高清晰度
|
||||
useCORS: true, // 允许加载跨域图片
|
||||
allowTaint: true,
|
||||
ignoreElements: (element) => {
|
||||
// 忽略所有图片加载错误
|
||||
return element.nodeName === 'IMG' && !element.complete;
|
||||
},
|
||||
logging: false, // 关闭日志记录
|
||||
imageTimeout: 3000, // 图片加载超时时间
|
||||
backgroundColor: '#ffffff'
|
||||
}).then(canvas => {
|
||||
// 创建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;
|
||||
|
||||
// 将canvas转换为图片
|
||||
const imgData = canvas.toDataURL('image/jpeg', 1.0);
|
||||
|
||||
// 添加图片到PDF
|
||||
pdf.addImage(imgData, 'JPEG', 0, 0, imgWidth, imgHeight);
|
||||
|
||||
// 生成PDF文件名
|
||||
const fileName = `领料单_${this.leaseApplyData.code || '未命名'}_${new Date().getTime()}.pdf`;
|
||||
|
||||
// 将PDF转换为Blob对象
|
||||
const pdfBlob = pdf.output('blob');
|
||||
|
||||
// 创建FormData对象用于上传
|
||||
const formData = new FormData();
|
||||
formData.append('file', pdfBlob, fileName);
|
||||
formData.append('id', this.leaseApplyData.leaseProjectId);
|
||||
|
||||
// 上传到服务器
|
||||
this.$modal.closeLoading();
|
||||
|
||||
// 调用上传API - 使用request
|
||||
request.post('/material/lease_apply_info/uploadPdf', formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
}).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.$modal.msgSuccess('单据文件已保存到服务器');
|
||||
|
||||
// 上传成功后执行打印
|
||||
printJS({
|
||||
printable: 'checkIdTwo',
|
||||
type: 'html',
|
||||
targetStyles: ['*'],
|
||||
maxWidth:'1400'
|
||||
// 其他配置选项
|
||||
});
|
||||
} else {
|
||||
this.$modal.msgError('保存单据文件失败');
|
||||
|
||||
// 即使保存失败也执行打印
|
||||
printJS({
|
||||
printable: 'checkIdTwo',
|
||||
type: 'html',
|
||||
targetStyles: ['*'],
|
||||
maxWidth:'1400'
|
||||
});
|
||||
}
|
||||
}).catch(() => {
|
||||
this.$modal.msgError('上传单据文件时发生错误');
|
||||
|
||||
// 即使上传失败也执行打印
|
||||
printJS({
|
||||
printable: 'checkIdTwo',
|
||||
type: 'html',
|
||||
targetStyles: ['*'],
|
||||
maxWidth:'1400'
|
||||
});
|
||||
});
|
||||
}).catch(error => {
|
||||
this.$modal.closeLoading();
|
||||
this.$modal.msgError('生成单据时发生错误');
|
||||
console.error('生成单据错误:', error);
|
||||
});
|
||||
}).catch(error => {
|
||||
this.$modal.closeLoading();
|
||||
this.$modal.msgError('处理图片时发生错误');
|
||||
console.error('处理图片错误:', error);
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue