604 lines
26 KiB
Plaintext
604 lines
26 KiB
Plaintext
<template>
|
||
<!-- wms到货单检验模板 -->
|
||
<!-- 导出检验 -->
|
||
<div style="width:100%" >
|
||
<el-form>
|
||
<el-row style="margin-top:20px">
|
||
<el-col :span="24">
|
||
<el-form-item style="float: right;margin-right: 20px">
|
||
<el-button type="primary" @click="exportExcel" v-loading="saveLoading">导出excel</el-button>
|
||
|
||
<el-button type="primary" @click="clickGeneratePicture" v-loading="saveLoading">导出PDF</el-button>
|
||
<el-button @click="cancel">取 消</el-button>
|
||
</el-form-item>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
<div v-loading="loading" style="height:1200px" ref="imageDom">
|
||
<!-- <fm-generate-form-->
|
||
<!-- v-if="!loading"-->
|
||
<!-- :data="jsonData"-->
|
||
<!-- :print-read=true-->
|
||
<!-- :preview=false-->
|
||
<!-- ref="generateForm"-->
|
||
<!-- >-->
|
||
<!-- -->
|
||
<!-- </fm-generate-form>-->
|
||
<fm-generate-form
|
||
v-if="!loading"
|
||
:data="jsonData1"
|
||
:print-read="isPrintRead"
|
||
:preview=false
|
||
:value="recordJson"
|
||
ref="generateForm"
|
||
>
|
||
</fm-generate-form>
|
||
<!-- <fm-generate-antd-form
|
||
v-if="!loading"
|
||
:data="jsonData"
|
||
:print-read=true
|
||
:preview=false
|
||
ref="generateAntForm"
|
||
>
|
||
</fm-generate-antd-form> -->
|
||
</div>
|
||
<div>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import html2canvas from "html2canvas"
|
||
import JsPDF from 'jspdf'
|
||
export default {
|
||
props: {
|
||
layerid: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
row: {
|
||
type: Object,
|
||
default: undefined
|
||
},
|
||
},
|
||
data () {
|
||
return {
|
||
isPrintRead:false,//是否是打印阅读模式
|
||
loading: false,
|
||
template: {},
|
||
jsonData: {},
|
||
jsonData1:{},//只读模式 在templateJson全部修改完后再赋值，所以定义一个jsonData副本
|
||
recordJson:{},
|
||
editData:{},
|
||
status:[{ text: '全部接收', value: '10' },
|
||
{ text: '让步接收', value: '20' },
|
||
{ text: '拒收', value: '25' }],
|
||
saveLoading: false,
|
||
selected:"",
|
||
chineseRow:{},
|
||
mm_inspect_record:{}
|
||
}
|
||
},
|
||
created() {
|
||
console.log(this.row)
|
||
this.queryMaterialTemplate()
|
||
},
|
||
methods: {
|
||
//查询检验模板
|
||
queryMaterialTemplate(){
|
||
this.loading = true
|
||
this.$inspectBill.queryCheckRecord(this.row.inspectBillDetailId).then(res=>{
|
||
if(res.data.code != 200){
|
||
this.$message.error(res.data.msg?res.data.msg:res.data.message)
|
||
|
||
return;
|
||
}
|
||
this.mm_inspect_record=res.data.data
|
||
this.$flowDefine.queryTemplate(res.data.data.templateId==null?res.data.data.id:res.data.data.templateId).then(rest=>{
|
||
console.log("rest-----------",rest)
|
||
this.template = rest.data.data
|
||
this.jsonData = JSON.parse(rest.data.data.templateJson)
|
||
for(let _value of res.data.data.recordJson){if(res.data.data.recordJson[_value]==""){delete res.data.data.recordJson[_value]}}//空的去掉
|
||
this.editData=JSON.parse(res.data.data.recordJson)
|
||
console.log(this.editData,'1826',res.data.data.recordJson)
|
||
//查询表头
|
||
let parmas = {
|
||
pageNo: 1,
|
||
pageSize: 99999,
|
||
templateId: res.data.data.templateId==null?res.data.data.id:res.data.data.templateId
|
||
}
|
||
this.$TemplateHeader.getHeaderList(parmas).then((resp) => {
|
||
if (resp.data.code == 200) {
|
||
//获取code集合
|
||
var headerList = resp.data.data.data
|
||
var codeList = []
|
||
headerList.forEach(header=>{
|
||
codeList.push(header.headerCode)
|
||
})
|
||
//匹配表头
|
||
// this.jsonData.list[0].rows.forEach(row=>{
|
||
// row.columns.forEach(columns=>{
|
||
// if(codeList.indexOf(columns.list[0].model) != -1){
|
||
// var codeName = this.toCamelCaseVar(columns.list[0].model)
|
||
// columns.list[0].options.defaultValue = this.row[codeName]
|
||
// }
|
||
// })
|
||
// })
|
||
if (this.jsonData.list[0].rows != null) {
|
||
this.jsonData.list[0].rows.forEach(row => {
|
||
row.columns.forEach(columns => {
|
||
if (columns.list[0] != null) {
|
||
// if (codeList.indexOf(columns.list[0].model) != -1) {
|
||
var codeName = this.toCamelCaseVar(columns.list[0].model)
|
||
columns.list[0].options.defaultValue = this.row[codeName]
|
||
// }
|
||
}
|
||
})
|
||
})
|
||
this.loading = false;
|
||
// this.$refs.generateForm.setData(JSON.parse(this.editData))
|
||
} else if (this.jsonData.list[1].rows != null) {
|
||
this.jsonData.list[1].rows.forEach(row => {
|
||
row.columns.forEach(columns => {
|
||
if (columns.list[0] != null) {
|
||
// if (codeList.indexOf(columns.list[0].model) != -1) {
|
||
var codeName = this.toCamelCaseVar(columns.list[0].model)
|
||
columns.list[0].options.defaultValue = this.row[codeName]
|
||
// }
|
||
}
|
||
})
|
||
})}
|
||
this.loading = false
|
||
} else {
|
||
this.$message.error(resp.msg);
|
||
}
|
||
});
|
||
console.log(res.data.data.recordJson,'res.data.data.recordJson1402',this.row,this.jsonData)
|
||
//上面是根据templateHeaderList来填写 但很多时候用户懒得配templateHeaderList 就要用下面的代码来填写了
|
||
let tableConfigs=require('@/api/tableConfig/tableConfig').configure
|
||
let tableHeaderList=tableConfigs.find(o=>{return o.tableName=='inspectBill'}).headerList
|
||
let row={}
|
||
tableHeaderList.forEach(
|
||
o=>{
|
||
if(this.row[o.tableProp]){
|
||
row[o.tableTitle]=this.row[o.tableProp]
|
||
}
|
||
}
|
||
)//通过tableConfig里面的把所有的转成中文（用户弄的东西字段名很多时候与实际字段对不上 ，所以匹配中文）
|
||
row['检验单号']=this.row.inspectBillNumber
|
||
console.log(row,'1654')
|
||
this.chineseRow=row
|
||
this.jsonData=this.g_method.templateJsonAutocomplete(this.jsonData,row,true)//第三个参数代表是中文匹配模式
|
||
|
||
setTimeout(()=>{
|
||
this.$refs.generateForm.setData(JSON.parse(
|
||
res.data.data.recordJson
|
||
))
|
||
console.log(res.data.data.recordJson,'res.data.data.recordJson')
|
||
let flag=rest.data.data.templateJson.indexOf('advancedCheckbox')//定制化组件特殊处理
|
||
if(flag==-1){this.isPrintRead=true}//如果没有定制化组件，打印阅读模式置为true
|
||
},1000)
|
||
// //第一行
|
||
// this.jsonData.list[0].rows[0].columns[0].list[0].options.defaultValue = this.row.materialCode
|
||
// this.jsonData.list[0].rows[0].columns[1].list[0].options.defaultValue = this.row.materialName
|
||
// this.jsonData.list[0].rows[0].columns[2].list[0].options.defaultValue = this.row.materialSpec
|
||
// //第二行
|
||
// this.jsonData.list[0].rows[1].columns[0].list[0].options.defaultValue = this.row.arriveBillNumberCopy
|
||
// this.jsonData.list[0].rows[1].columns[1].list[0].options.defaultValue = this.row.inspectBillNumberCopy
|
||
// this.jsonData.list[0].rows[1].columns[2].list[0].options.defaultValue = this.row.inspectTotalQty
|
||
// //第三行
|
||
// this.jsonData.list[0].rows[2].columns[0].list[0].options.defaultValue = this.row.spotCheckQty
|
||
// this.jsonData.list[0].rows[2].columns[1].list[0].options.defaultValue = ""
|
||
// this.jsonData.list[0].rows[2].columns[2].list[0].options.defaultValue = ""
|
||
// //第四行
|
||
// this.jsonData.list[0].rows[3].columns[0].list[0].options.defaultValue = ""
|
||
// this.jsonData.list[0].rows[3].columns[1].list[0].options.defaultValue = this.row.customerName
|
||
// this.jsonData.list[0].rows[3].columns[2].list[0].options.defaultValue = this.row.supplierName
|
||
console.log(this.jsonData)
|
||
|
||
this.jsonData1=JSON.parse (JSON.stringify(this.jsonData))//只读模式 在templateJson全部修改完后再赋值，所以定义一个jsonData副本
|
||
|
||
})
|
||
})
|
||
},
|
||
listStr(l)//对list中的每一个元素转化文本
|
||
{
|
||
let result=[]
|
||
console.log(l,'l',this.editData.table_otqfudgi,this.editData)
|
||
if(l.type=='table')
|
||
//只添加table的，其他类型不添加
|
||
{
|
||
|
||
if(!this.g_method.checkData(this.editData[l.model])){return []}//如果没有值 则返回空数组
|
||
|
||
result.push(l.name+'\n')//表的标题
|
||
console.log(this.editData[l.model],l.tableColumns,'1745')
|
||
let titleForKey=l.tableColumns.map(o=>{return o.model})
|
||
let title=l.tableColumns.map(o=>{return o.name})
|
||
let data=this.editData[l.model]//dataJson
|
||
result.push('"",'+title.join(",")+"\n"); //标题
|
||
if(l.tableColumns[0].type=='advancedCheckbox'){
|
||
console.log(data,'1848',title,titleForKey)
|
||
for(var i=0;i<data.length;i++){
|
||
var temp = [""];
|
||
for(var j=0;j<titleForKey.length;j++){
|
||
|
||
temp.push(data[i][titleForKey[j]].data[0]);
|
||
}
|
||
|
||
result.push(temp.join(",")+"\n");
|
||
}//定制化组件单独处理
|
||
for(var i=0;i<data.length;i++){
|
||
var temp = [""];
|
||
for(var j=0;j<titleForKey.length;j++){
|
||
let pushString=data[i][titleForKey[j]].text.find(o=>{return o!=""})
|
||
temp.push(pushString);
|
||
}
|
||
|
||
result.push(temp.join(",")+"\n");
|
||
}
|
||
return result
|
||
}//定制多选框单独处理
|
||
else{
|
||
//非定制多选框
|
||
for(var i=0;i<data.length;i++){
|
||
//表格内容
|
||
var temp = [""];
|
||
for(var j=0;j<titleForKey.length;j++){
|
||
temp.push(data[i][titleForKey[j]]);
|
||
}
|
||
|
||
result.push(temp.join(",")+"\n");
|
||
}
|
||
}
|
||
// l.tableColumns.forEach()
|
||
return result
|
||
}
|
||
if(l.type=='tabs')
|
||
//只添加table和tab的，其他类型不添加
|
||
// tabs里会包含多个table
|
||
{
|
||
l.tabs.forEach(o=>{
|
||
if(!o.list){
|
||
return}
|
||
o.list.forEach(
|
||
r=>{result.push(this.listStr(r))}
|
||
)
|
||
})
|
||
console.log(result,'1627')
|
||
return result
|
||
}
|
||
if(l.type=='report'){
|
||
l.rows.forEach(o=>{
|
||
let temp=[]
|
||
if(!o.columns){return}
|
||
o.columns.forEach(r=>{
|
||
if(!r.list || !r.list[0] || !r.list[0].model){return}
|
||
temp.push(this.editData[r.list[0].model])
|
||
}
|
||
)
|
||
result.push(temp.join(",")+"\n");
|
||
}
|
||
|
||
)
|
||
return result
|
||
}
|
||
else{return []}
|
||
},
|
||
exportExcel()
|
||
{
|
||
|
||
try{
|
||
console.log("-------------------------------")
|
||
|
||
this.$refs.generateForm.getData().then(data => {
|
||
console.log(data)
|
||
console.log(JSON.stringify(data))
|
||
console.log(this.jsonData1)
|
||
console.log(JSON.stringify(this.jsonData1))
|
||
|
||
console.log(this.mm_inspect_record)
|
||
console.log(this.row)
|
||
|
||
let time =this.mm_inspect_record.updatedDt==null ?this.mm_inspect_record.createdDt:this.mm_inspect_record.updatedDt
|
||
let dd={
|
||
"templateId":this.mm_inspect_record.templateId,
|
||
"dataJson": encodeURIComponent(JSON.stringify(data), "utf-8"),
|
||
"fileName":this.row.inspectBillNumber+"-"+this.row.materialCode+"-"+time
|
||
}
|
||
|
||
console.log("===================",dd)
|
||
this.$templateData.formakingExport(dd).then(res=>{
|
||
console.log(res)
|
||
// this.download(res.data,dd.fileName+".xlsx");
|
||
|
||
const url = window.URL.createObjectURL(new Blob([res.data], {
|
||
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}
|
||
))
|
||
const link = document.createElement('a')
|
||
link.style.display = 'none'
|
||
link.href = url
|
||
link.setAttribute('download', dd.fileName+'.xlsx')
|
||
document.body.appendChild(link)
|
||
link.click()
|
||
document.body.removeChild(link)
|
||
})
|
||
})
|
||
}
|
||
catch{this.exportExcelLocal()}//原来的本地导出，顾晨博写的那个接口在数据过多时会报413，414错误，所以如果发生错误就仍旧调本地导出(临时解决方案)
|
||
|
||
|
||
//
|
||
// return
|
||
// // this.isPrintRead=false//打印阅读模式置为false
|
||
// console.log(this.editData,'1825')
|
||
// //导出Excel
|
||
// var str = []//要输出的excel文件中的文本
|
||
//
|
||
// let row1=[]//第一行
|
||
// let row2=[]//第一行
|
||
// for(let key in this.chineseRow)
|
||
// //从父组件传过来的数据作为第一行和第二行
|
||
// {
|
||
// row1.push(key)
|
||
// row2.push(String(this.chineseRow[key]))
|
||
// }
|
||
// str.push(row1.join(",")+"\n");
|
||
// str.push(row2.join(",")+"\n");
|
||
//
|
||
// this.jsonData.list.forEach((l,index)=>{
|
||
// if(index==0){str[2]=[];return;}//第一个list直接跳过（前面处理过了）
|
||
// str[index+2]=this.listStr(l)//对list中的每一个元素转化文本
|
||
//
|
||
// })
|
||
//
|
||
// console.log(str,'str1736')
|
||
// str=str.flat(Infinity) //扁平化函数
|
||
// str=str.filter(o=>{return this.g_method.checkData(o)})//去掉空的
|
||
// // this.g_method.objectMap(null,this.jsonData,process)//深度遍历对象
|
||
// // var title = storageObj.title;
|
||
// // var titleForKey = storageObj.titleForKey;
|
||
// // var data = storageObj.data;
|
||
// // var str = [];
|
||
// // str.push("666\n")
|
||
// // str.push(storageObj.title.join(",")+"\n");
|
||
// // for(var i=0;i<data.length;i++){
|
||
// // var temp = [];
|
||
// // for(var j=0;j<titleForKey.length;j++){
|
||
// // temp.push(data[i][titleForKey[j]]);
|
||
// // }
|
||
// // str.push(temp.join(",")+"\n");
|
||
// // }
|
||
// var uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str.join(""));
|
||
// var downloadLink = document.createElement("a");
|
||
// downloadLink.href = uri;
|
||
// console.log(this.chineseRow,'this.chineseRow')
|
||
// downloadLink.download = new Date().toISOString().substring(0,10)+"检验单"+this.chineseRow['检验单号']+"导出.xls";
|
||
// document.body.appendChild(downloadLink);
|
||
// downloadLink.click();
|
||
// document.body.removeChild(downloadLink);
|
||
|
||
},
|
||
exportLocal()
|
||
{
|
||
//原来的本地导出，顾晨博写的那个接口在数据过多时会报413，414错误，所以如果发生错误就仍旧调本地导出（临时解决方案）
|
||
// this.isPrintRead=false//打印阅读模式置为false
|
||
console.log(this.editData,'1825')
|
||
//导出Excel
|
||
var str = []//要输出的excel文件中的文本
|
||
|
||
let row1=[]//第一行
|
||
let row2=[]//第一行
|
||
for(let key in this.chineseRow)
|
||
//从父组件传过来的数据作为第一行和第二行
|
||
{
|
||
row1.push(key)
|
||
row2.push(String(this.chineseRow[key]))
|
||
}
|
||
str.push(row1.join(",")+"\n");
|
||
str.push(row2.join(",")+"\n");
|
||
|
||
this.jsonData.list.forEach((l,index)=>{
|
||
if(index==0){str[2]=[];return;}//第一个list直接跳过（前面处理过了）
|
||
str[index+2]=this.listStr(l)//对list中的每一个元素转化文本
|
||
|
||
})
|
||
|
||
console.log(str,'str1736')
|
||
str=str.flat(Infinity) //扁平化函数
|
||
str=str.filter(o=>{return this.g_method.checkData(o)})//去掉空的
|
||
// this.g_method.objectMap(null,this.jsonData,process)//深度遍历对象
|
||
// var title = storageObj.title;
|
||
// var titleForKey = storageObj.titleForKey;
|
||
// var data = storageObj.data;
|
||
// var str = [];
|
||
// str.push("666\n")
|
||
// str.push(storageObj.title.join(",")+"\n");
|
||
// for(var i=0;i<data.length;i++){
|
||
// var temp = [];
|
||
// for(var j=0;j<titleForKey.length;j++){
|
||
// temp.push(data[i][titleForKey[j]]);
|
||
// }
|
||
// str.push(temp.join(",")+"\n");
|
||
// }
|
||
var uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str.join(""));
|
||
var downloadLink = document.createElement("a");
|
||
downloadLink.href = uri;
|
||
console.log(this.chineseRow,'this.chineseRow')
|
||
downloadLink.download = new Date().toISOString().substring(0,10)+"检验单"+this.chineseRow['检验单号']+"导出.xls";
|
||
document.body.appendChild(downloadLink);
|
||
downloadLink.click();
|
||
document.body.removeChild(downloadLink);
|
||
},
|
||
//保存按钮
|
||
handleSubmit () {
|
||
if(this.selected=="")
|
||
{
|
||
this.$message.error("请选择接收状态")
|
||
return
|
||
}
|
||
this.saveLoading = true
|
||
this.$refs.generateForm.getData().then(data => {
|
||
var dto = {
|
||
inspectBillDetailId: this.row.inspectBillDetailId,
|
||
idArr:this.row.idArr,
|
||
templateId: this.template.id,
|
||
templateCode: this.template.templateCode,
|
||
templateName: this.template.name,
|
||
templateJson: this.template.templateJson,
|
||
receiveStatus:this.selected,
|
||
recordJson: JSON.stringify(data),
|
||
}
|
||
this.$inspectBill.saveCheck(dto).then(res=>{
|
||
this.saveLoading = false
|
||
this.$message.success("保存成功")
|
||
this.$parent.getList()
|
||
this.$layer.close(this.layerid)
|
||
})
|
||
}).catch(e => {
|
||
console.log(e,111111)
|
||
})
|
||
},
|
||
resetSubmit()
|
||
{
|
||
this.$refs.generateForm.reset();
|
||
},
|
||
//取消按钮
|
||
cancel(){
|
||
this.$layer.close(this.layerid)
|
||
},
|
||
|
||
toCamelCaseVar(variable){
|
||
let reg = /_+(\w)/g;
|
||
let str = variable.replace(reg,function(){
|
||
if(arguments[2])return (arguments[1]).toUpperCase();
|
||
else return arguments[0];
|
||
});
|
||
return str;
|
||
},
|
||
clickGeneratePicture() { //生成图片
|
||
html2canvas(this.$refs.imageDom).then(canvas => {
|
||
// 转成图片，生成图片地址
|
||
this.imgUrl = canvas.toDataURL("image/png"); //可将 canvas 转为 base64 格式
|
||
var contentHeight = canvas.height;
|
||
var contentWidth = canvas.width;
|
||
//一页pdf显示html页面生成的canvas高度;
|
||
var pageHeight = (contentWidth / 592.28) * 841.89;
|
||
var imgWidth = 595.28;
|
||
var imgHeight = (592.28 / contentWidth) * contentHeight;
|
||
var position = 0;
|
||
//未生成pdf的html页面高度
|
||
var leftHeight = contentHeight;
|
||
var PDF = new JsPDF("", "pt", "a4");
|
||
console.log(leftHeight,'leftHeight',pageHeight,'pageHeight')
|
||
if (leftHeight < pageHeight) {
|
||
PDF.addImage(this.imgUrl, "JPEG", 0, 0, imgWidth, imgHeight);
|
||
} else {
|
||
while (leftHeight > 0) {
|
||
PDF.addImage(this.imgUrl, "JPEG", 0, position, imgWidth, imgHeight);
|
||
leftHeight -= pageHeight;
|
||
position -= 841.89;
|
||
if (leftHeight > 0) {
|
||
PDF.addPage();
|
||
}
|
||
}
|
||
}
|
||
PDF.save(this.template.templateCode + ".pdf"); // 这里是导出的文件名
|
||
// var eleLink = document.createElement("a");
|
||
// eleLink.href = this.imgUrl; // 转换后的图片地址
|
||
// eleLink.download = "历史曲线图";
|
||
// document.body.appendChild(eleLink);
|
||
// // 触发点击
|
||
// eleLink.click();
|
||
// // 然后移除
|
||
// document.body.removeChild(eleLink);
|
||
});
|
||
},
|
||
|
||
downloadIamge(imgsrc, name) {//下载图片地址和图片名
|
||
var image = new Image();
|
||
// 解决跨域 Canvas 污染问题
|
||
image.setAttribute("crossOrigin", "anonymous");
|
||
image.onload = function() {
|
||
var canvas = document.createElement("canvas");
|
||
canvas.width = image.width;
|
||
canvas.height = image.height;
|
||
var context = canvas.getContext("2d");
|
||
context.drawImage(image, 0, 0, image.width, image.height);
|
||
var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
|
||
|
||
var a = document.createElement("a"); // 生成一个a元素
|
||
var event = new MouseEvent("click"); // 创建一个单击事件
|
||
a.download = name || "photo"; // 设置图片名称
|
||
a.href = url; // 将生成的URL设置为a.href属性
|
||
a.dispatchEvent(event); // 触发a的单击事件
|
||
};
|
||
image.src = imgsrc;
|
||
},
|
||
downs(){
|
||
html2canvas(this.$refs.imageDom).then(canvas => {
|
||
// 转成图片，生成图片地址
|
||
window.pageYoffset = 0;
|
||
document.documentElement.scrollTop = 0;
|
||
document.body.scrollTop = 0;
|
||
this.imgUrl = canvas.toDataURL("image/png"); //可将 canvas 转为 base64 格式
|
||
this.downloadIamge(this.imgUrl, 'pic')
|
||
});
|
||
|
||
},
|
||
printOut() {
|
||
let shareContent = document.body,//需要截图的包裹的（原生的）DOM 对象
|
||
width = shareContent.clientWidth, //获取dom 宽度
|
||
height = shareContent.clientHeight, //获取dom 高度
|
||
canvas = document.createElement("canvas"), //创建一个canvas节点
|
||
scale = 2; //定义任意放大倍数 支持小数
|
||
canvas.width = width * scale; //定义canvas 宽度 * 缩放
|
||
canvas.height = height * scale; //定义canvas高度 *缩放
|
||
canvas.style.width = shareContent.clientWidth * scale + "px";
|
||
canvas.style.height = shareContent.clientHeight * scale + "px";
|
||
canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
|
||
let opts = {
|
||
scale: scale, // 添加的scale 参数
|
||
canvas: canvas, //自定义 canvas
|
||
logging: false, //日志开关，便于查看html2canvas的内部执行流程
|
||
width: width, //dom 原始宽度
|
||
height: height,
|
||
useCORS: true, // 【重要】开启跨域配置
|
||
};
|
||
|
||
html2canvas(this.$refs.imageDom,opts).then(canvas => {
|
||
var contentWidth = canvas.width;
|
||
var contentHeight = canvas.height;
|
||
//一页pdf显示html页面生成的canvas高度;
|
||
var pageHeight = (contentWidth / 592.28) * 841.89;
|
||
//未生成pdf的html页面高度
|
||
var leftHeight = contentHeight;
|
||
//页面偏移
|
||
var position = 0;
|
||
//a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
|
||
var imgWidth = 595.28;
|
||
var imgHeight = (592.28 / contentWidth) * contentHeight;
|
||
var pageData = canvas.toDataURL("image/jpeg", 1.0);
|
||
var PDF = new JsPDF("", "pt", "a4");
|
||
console.log(leftHeight,pageHeight,'http://10.10.10.221:8088/')
|
||
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(this.template.templateCode + ".pdf"); // 这里是导出的文件名
|
||
});
|
||
},
|
||
|
||
}
|
||
}
|
||
</script>
|