From a8fff7bf6efcdbc4d72a0016f61bbf5a34ede31c Mon Sep 17 00:00:00 2001
From: xudada <xuyonghui1118@163.com>
Date: Tue, 31 Mar 2020 15:24:01 +0800
Subject: [PATCH] 进港原始，理货优化回执，添加导出EXECL,PDF功能
---
src/api/htmlToPdf.js | 128 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------------------------
src/views/nmms_import/EnterFlightTally.vue | 2 +-
src/views/nmms_import/OrigMaster.vue | 7 ++++---
src/views/nmms_import/TallyMster.vue | 4 +++-
src/views/nmms_import/Waybill.vue | 4 ++--
5 files changed, 107 insertions(+), 38 deletions(-)
diff --git a/src/api/htmlToPdf.js b/src/api/htmlToPdf.js
index c18d197..35cd9b2 100644
--- a/src/api/htmlToPdf.js
+++ b/src/api/htmlToPdf.js
@@ -1,34 +1,100 @@
-import html2canvas from 'html2canvas'
-/*import jsPDF from 'jspdf'*/
-export default{
- install (Vue, options) {
- Vue.prototype.getPdf = function (htmlTitle,currentTime) {
- var element = document.getElementById("file");
- html2canvas(element, {
- logging:false
- }).then(function(canvas) {
- var pdf = new jsPDF('p', 'mm', 'a4'); //A4纸，纵向
- var ctx = canvas.getContext('2d'),
- a4w = 190, a4h = 277, //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
- imgHeight = Math.floor(a4h * canvas.width / a4w), //按A4显示比例换算一页图像的像素高度
- renderedHeight = 0;
-
- while(renderedHeight < canvas.height) {
- var page = document.createElement("canvas");
- page.width = canvas.width;
- page.height = Math.min(imgHeight, canvas.height - renderedHeight);//可能内容不足一页
-
- //用getImageData剪裁指定区域，并画到前面创建的canvas对象中
- page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0);
- pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)); //添加图像到页面，保留10mm边距
-
- renderedHeight += imgHeight;
- if(renderedHeight < canvas.height)
- pdf.addPage();//如果后面还有内容，添加一个空页
- }
+//不使用JQuery版的
- pdf.save(htmlTitle);
- });
- }
+import html2canvas from 'html2canvas';
+import JsPDF from 'jspdf';
+
+/**
+ * @param ele 要生成 pdf 的DOM元素（容器）
+ * @param padfName PDF文件生成后的文件名字
+ * */
+
+function downloadPDF(ele, pdfName){
+
+ let eleW = ele.offsetWidth;// 获得该容器的宽
+ let eleH = ele.offsetHeight;// 获得该容器的高
+
+
+ let eleOffsetTop = ele.offsetTop; // 获得该容器到文档顶部的距离
+ let eleOffsetLeft = ele.offsetLeft; // 获得该容器到文档最左的距离
+
+ var canvas = document.createElement("canvas");
+ var abs = 0;
+
+ let win_in = document.documentElement.clientWidth || document.body.clientWidth; // 获得当前可视窗口的宽度（不包含滚动条）
+ let win_out = window.innerWidth; // 获得当前窗口的宽度（包含滚动条）
+
+ if(win_out>win_in){
+ // abs = (win_o - win_i)/2; // 获得滚动条长度的一半
+ abs = (win_out - win_in)/2; // 获得滚动条宽度的一半
+ // console.log(a, '新abs');
}
+
+ canvas.width = eleW * 2; // 将画布宽&&高放大两倍
+ canvas.height = eleH * 2;
+
+
+
+
+ var context = canvas.getContext("2d");
+
+ context.scale(2, 2);
+
+ context.translate(-eleOffsetLeft -abs, -eleOffsetTop);
+ // 这里默认横向没有滚动条的情况，因为offset.left(),有无滚动条的时候存在差值，因此
+ // translate的时候，要把这个差值去掉
+
+ // html2canvas(element).then( (canvas)=>{ //报错
+ // html2canvas(element[0]).then( (canvas)=>{
+ html2canvas( ele, {
+ dpi: 300,
+ // allowTaint: true, //允许 canvas 污染， allowTaint参数要去掉，否则是无法通过toDataURL导出canvas数据的
+ useCORS:true //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。
+ } ).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 = 595.28/contentWidth * contentHeight;
+
+ var pageData = canvas.toDataURL('image/jpeg', 1.0);
+
+
+
+ var pdf = new JsPDF('', 'pt', 'a4');
+
+ //有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
+ //当内容未超过pdf一页显示的范围，无需分页
+ if (leftHeight < pageHeight) {
+ //在pdf.addImage(pageData, 'JPEG', 左，上，宽度，高度)设置在pdf中显示；
+ pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight);
+ // pdf.addImage(pageData, 'JPEG', 20, 40, 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(pdfName);
+ })
+
+
+}
+
+
+export default {
+ downloadPDF
}
diff --git a/src/views/nmms_import/EnterFlightTally.vue b/src/views/nmms_import/EnterFlightTally.vue
index 78dd74b..a670ea4 100644
--- a/src/views/nmms_import/EnterFlightTally.vue
+++ b/src/views/nmms_import/EnterFlightTally.vue
@@ -102,7 +102,7 @@
flightno: '',
flightdate:'',
originstation:'',
- destinationstation:''
+ destinationstation:'',
},
options: [],
airportid:'',
diff --git a/src/views/nmms_import/OrigMaster.vue b/src/views/nmms_import/OrigMaster.vue
index e38913d..11989b2 100644
--- a/src/views/nmms_import/OrigMaster.vue
+++ b/src/views/nmms_import/OrigMaster.vue
@@ -708,7 +708,7 @@
import{addResponse,selectResponseList} from "../../api/InResponse";
import FileSaver from "file-saver";
import XLSX from "xlsx";
- /*import htmlToPdf from "../../api/htmlToPdf"*/
+ import htmlToPdf from "../../api/htmlToPdf"
export default {
data() {
/*初始数据*/
@@ -877,11 +877,12 @@
methods: {
//导出PDF,EXCEL文件
handleCommand(command) {
- if(command='EXCEL'){
+ if(command=='EXCEL'){
this.$message('正在为您下载' + command+'文件');
this.downLoad();
- }else if(command='PDF'){
+ }else{
this.htmlTitle=this.defaultQuery.flightno+this.defaultQuery.flightdate;
+ htmlToPdf.downloadPDF(document.querySelector('#pdfDom'), this.htmlTitle)
this.$message('正在为您下载' + command+'文件');
//this.getPdf();
}
diff --git a/src/views/nmms_import/TallyMster.vue b/src/views/nmms_import/TallyMster.vue
index be061f4..15d3b74 100644
--- a/src/views/nmms_import/TallyMster.vue
+++ b/src/views/nmms_import/TallyMster.vue
@@ -436,7 +436,7 @@
flightdate:undefined,
originstation:undefined,
destinationstation:undefined,
- awba:undefined
+ awba:undefined,
},
tableData: [],
tableData2: [],
@@ -690,6 +690,7 @@
this.dialogStatus='update';
this.FenStatus='ediAwbh';
this.ruleForm=row;
+ this.ruleForm.flightno=row.carrier+row.flightno;
},
//编辑分单
handleFen(index,row){
@@ -716,6 +717,7 @@
//获取进港理货列表
getMt5201List(){
this.tableLoading=true;
+ console.log(this.defaultQuery)
getMt5201List(this.defaultQuery).then(res =>{
this.sumNmmsCount=0;
this.sumNmmsPrice=0;
diff --git a/src/views/nmms_import/Waybill.vue b/src/views/nmms_import/Waybill.vue
index 81c227a..a818a90 100644
--- a/src/views/nmms_import/Waybill.vue
+++ b/src/views/nmms_import/Waybill.vue
@@ -67,9 +67,9 @@
<el-col :span="8" style="margin-right: 0px">
<el-button type="primary" v-on:click="QueryData">查询</el-button>
</el-col>
- <el-col :span="16" style="margin-right: 0px">
+ <!--<el-col :span="16" style="margin-right: 0px">
<el-button type="primary">批量修改状态</el-button>
- </el-col>
+ </el-col>-->
</el-col>
</el-row>
<!--查询结果样式-->
--
libgit2 0.24.0