From baca798863dc9a7549bde0ba1755cc8d0e31e335 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B2=88=E5=AD=A6=E5=9D=A4?= <1107410514@qq.com> Date: Tue, 15 Oct 2019 17:29:49 +0800 Subject: [PATCH] kun 19/10/15 17:30 --- src/htmlToPdf.js | 66 +++++++++++++++++++------------ src/views/project/Application.vue | 37 +++++++++++++---- src/views/project/Schedule.vue | 2 +- 3 files changed, 72 insertions(+), 33 deletions(-) diff --git a/src/htmlToPdf.js b/src/htmlToPdf.js index d435c75..2e07fe8 100644 --- a/src/htmlToPdf.js +++ b/src/htmlToPdf.js @@ -4,32 +4,48 @@ export default { install (Vue, options) { Vue.prototype.getPdf = function (idStr, title) { html2Canvas(document.querySelector('#' + idStr), { - allowTaint: true + allowTaint: true, + scale: 2 // 提升画面质量，但是会增加文件大小 }).then(function (canvas) { - let contentWidth = canvas.width - let contentHeight = canvas.height - let pageHeight = contentWidth / 592.28 * 841.89 - let leftHeight = contentHeight - let position = 0 - let imgWidth = 595.28 - let imgHeight = 592.28 / contentWidth * contentHeight - let pageData = canvas.toDataURL('image/jpeg', 1.0) - let 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') - } - ) + var contentWidth = canvas.width + var contentHeight = canvas.height + + var pageData = canvas.toDataURL('image/jpeg', 0.4) + + var pdfWidth = ((contentWidth + 10) / 2) * 0.75 + var pdfHeight = ((contentHeight + 200) / 2) * 0.75 // 500为底部留白 + + var imgWidth = pdfWidth + var imgHeight = (contentHeight / 2) * 0.75 // 内容图片这里不需要留白的距离 + + var pdf = new JsPDF('', 'pt', [pdfWidth, pdfHeight]) + pdf.addImage(pageData, 'jpeg', 0, 0, imgWidth, imgHeight) + // pdf.save('report_pdf_' + new Date().getTime() + '.pdf') + pdf.save(title + '.pdf') + + // let contentWidth = canvas.width + // let contentHeight = canvas.height + // let pageHeight = (contentWidth / 592.28) * 841.89 + // let leftHeight = contentHeight + // let position = 0 + // let imgWidth = 595.28 + // let imgHeight = (592.28 / contentWidth) * contentHeight + // let pageData = canvas.toDataURL('image/jpeg', 0.4) + // let 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/project/Application.vue b/src/views/project/Application.vue index 48c5eaa..6e5e5a3 100644 --- a/src/views/project/Application.vue +++ b/src/views/project/Application.vue @@ -512,16 +512,39 @@ export default { }, /** 上传文件 */ getFile(event) { + let filetypes = [".jpg", ".png", ".jpeg"] + let filepath = event.target.value + if (filepath) { + var isnext = false; + var fileend = filepath.substring(filepath.lastIndexOf(".")); + if (filetypes && filetypes.length > 0) { + for (var i = 0; i < filetypes.length; i++) { + if (filetypes[i] == fileend) { + isnext = true; + break; + } + } + } + if (!isnext) { + alert("不接受此文件类型！"); + return false; + } + } + let filemaxsize = 1024;//1M + let fileSize = event.target.files[0].size / 1024; + if (fileSize > filemaxsize) { + alert("附件大小不能大于" + filemaxsize / 1024 + "M！"); + return false; + } let _this = this let file = event.target.files[0]; /* - let reader = new FileReader() - reader.readAsDataURL(file) // 这里是最关键的一步，转换就在这里 - reader.onloadend = function () { - _this.src = this.result - } + let reader = new FileReader() + reader.readAsDataURL(file) // 这里是最关键的一步，转换就在这里 + reader.onloadend = function () { + _this.src = this.result + } */ - let param = new FormData(); //创建form对象 param.append('file', file);//通过append向form对象添加数据 // console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去 @@ -711,7 +734,7 @@ export default {