From 504c61c842c57226728db1142bd3b192457476f3 Mon Sep 17 00:00:00 2001 From: caoxinyu Date: Sat, 22 Dec 2018 09:57:23 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8F=91=E8=B4=A7=E7=AE=A1=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 + src/main.js | 4 +- src/vendor/htmlToPdf.js | 113 +++------- src/views/MarketingCenter/BidBond/index.vue | 2 +- .../DeliveryManagement/htmlToPdf.js | 38 ++++ .../DeliveryManagement/index.vue | 209 +++++++++++------- 6 files changed, 206 insertions(+), 162 deletions(-) create mode 100644 src/views/MarketingCenter/DeliveryManagement/htmlToPdf.js diff --git a/package.json b/package.json index 8618c4a3..0d67aa4f 100644 --- a/package.json +++ b/package.json @@ -17,8 +17,10 @@ "echarts": "^4.2.0-rc.2", "element-ui": "2.4.6", "file-saver": "^1.3.8", + "html2canvas": "^1.0.0-alpha.12", "jquery": "^3.3.1", "js-cookie": "2.2.0", + "jspdf": "^1.4.1", "node-sass": "^4.10.0", "normalize.css": "7.0.0", "nprogress": "0.2.0", diff --git a/src/main.js b/src/main.js index df82ab70..487c94b2 100644 --- a/src/main.js +++ b/src/main.js @@ -16,8 +16,10 @@ import '@/permission' // permission control import curd from '@/utils/curd' import time from 'time-formater' -Vue.use(curd) +import htmlToPdf from '@/vendor/htmlToPdf' +Vue.use(curd) +Vue.use(htmlToPdf) Vue.use(ElementUI) // 处理时间字符串格式全局过滤器 '2018/1/23 00:00:00' to '2018-01-23' Vue.filter('formatTime', function(value) { diff --git a/src/vendor/htmlToPdf.js b/src/vendor/htmlToPdf.js index 3cef9ee3..9007b346 100644 --- a/src/vendor/htmlToPdf.js +++ b/src/vendor/htmlToPdf.js @@ -1,78 +1,35 @@ -// // /* eslint-disable */ -// // import html2Canvas from 'html2canvas' -// // import JsPDF from 'jspdf' -// // export default{ -// // install (Vue, options) { -// // Vue.prototype.getPdf = function (id) { -// // let title = this.htmlTitle -// // html2Canvas(document.querySelector(`#${id}`), { -// // allowTaint: true -// // }).then(function (canvas) { -// // let contentWidth = canvas.width -// // let contentHeight = canvas.height -// // let pageHeight = contentWidth / 592.28 * 841.89 //一页pdf显示html页面生成的canvas高度; -// // let leftHeight = contentHeight //未生成pdf的html页面高度 -// // let position = 0 //页面偏移 -// // let imgWidth = 595.28 //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高 -// // let imgHeight = 592.28 / contentWidth * contentHeight -// // let pageData = canvas.toDataURL('image/jpeg', 1.0) -// // window.print(pageData) -// // let PDF = new JsPDF('', 'pt', 'a4') -// // if (leftHeight < pageHeight) { //当内容未超过pdf一页显示的范围，无需分页 -// // 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(title + '.pdf') -// // } -// // ) -// // } -// // } -// // } -// -// /* eslint-disable */ -// import html2Canvas from 'html2canvas' -// import JsPDF from 'jspdf' -// export default{ -// install (Vue, options) { -// Vue.prototype.getPdf = function (id) { -// let title = this.htmlTitle -// html2Canvas(document.querySelector(`#${id}`), { -// allowTaint: true -// }).then(function (canvas) { -// let contentWidth = canvas.width -// let contentHeight = canvas.height -// let pageHeight = contentWidth / 592.28 * 841.89 //一页pdf显示html页面生成的canvas高度; -// let leftHeight = contentHeight //未生成pdf的html页面高度 -// let position = 0 //页面偏移 -// let imgWidth = 595.28 //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高 -// let imgHeight = 592.28 / contentWidth * contentHeight -// let pageData = canvas.toDataURL('image/jpeg', 1.0) -// window.print(pageData) -// let PDF = new JsPDF('', 'pt', 'a4') -// if (leftHeight < pageHeight) { //当内容未超过pdf一页显示的范围，无需分页 -// 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(title + '.pdf') -// } -// ) -// } -// } -// } -// +import html2Canvas from 'html2canvas' +import JsPDF from 'jspdf' +export default { + install(Vue, options) { + Vue.prototype.getPdf = function(id, title) { + html2Canvas(document.querySelector(`#${id}`), { + allowTaint: true + }).then(function(canvas) { + const contentWidth = canvas.width + const contentHeight = canvas.height + const pageHeight = contentWidth / 592.28 * 841.89 + let leftHeight = contentHeight + let position = 0 + const imgWidth = 595.28 + const imgHeight = 592.28 / contentWidth * contentHeight + const pageData = canvas.toDataURL('image/jpeg', 1.0) + const PDF = new JsPDF('', 'pt', 'a4') + 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(title + '.pdf') + } + ) + } + } +} diff --git a/src/views/MarketingCenter/BidBond/index.vue b/src/views/MarketingCenter/BidBond/index.vue index d2a992a2..77d16b86 100644 --- a/src/views/MarketingCenter/BidBond/index.vue +++ b/src/views/MarketingCenter/BidBond/index.vue @@ -408,7 +408,7 @@