From 2119b21abc8235310c2cedde9da33c94b825ff37 Mon Sep 17 00:00:00 2001 From: daihh Date: Sat, 22 Oct 2022 19:08:33 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E9=A6=96=E9=A1=B5=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/styles/portal-index.scss | 8 +- src/utils/htmlToPdf.js | 112 ---------------------------- src/views/user/Mynotes.vue | 5 +- 3 files changed, 5 insertions(+), 120 deletions(-) delete mode 100644 src/utils/htmlToPdf.js diff --git a/src/assets/styles/portal-index.scss b/src/assets/styles/portal-index.scss index 05a5c862..11e827a3 100644 --- a/src/assets/styles/portal-index.scss +++ b/src/assets/styles/portal-index.scss @@ -983,7 +983,7 @@ } } - + .medal-index{ // 勋章规则控制 margin: 40px 60px 0 60px; } @@ -1008,7 +1008,7 @@ margin-right: 30px; margin-bottom: 30px; border-radius: 8px; - + .xindex-course-image{ width: 340px; height: 191px; @@ -1021,11 +1021,11 @@ margin-top:30px; } .xindex-ranking-course{ - height: 612px; + height: 592px; } .xindex-ranking-case{ - height: 395.5px; + height: 295.5px; } .xindex-ranking-article{ diff --git a/src/utils/htmlToPdf.js b/src/utils/htmlToPdf.js deleted file mode 100644 index e6349124..00000000 --- a/src/utils/htmlToPdf.js +++ /dev/null @@ -1,112 +0,0 @@ -/** - path: src/utils/htmlToPdf.js - name: 导出页面为PDF格式 -**/ -import html2Canvas from 'html2canvas' -import JsPDF from 'jspdf' - - function convertImageToCanvas(image) { - // 创建canvas DOM元素，并设置其宽高和图片一样 - let canvas = document.createElement("canvas"); - canvas.width = image.width; - canvas.height = image.height; - canvas.getContext("2d").drawImage(image, 0, 0); - // 我们在实际的开发中，需要将抓换后的base64图片编码传输到后台图片服务器，由server直接存储或者生成一张图片； - // 所以会用到 toDataURL - //console.log(canvas.toDataURL('image/jpeg')) - return canvas; - } - -const htmlToPdf = { -// pdfExport() { -// var mainRight = document.getElementById('mainRight'); -// html2canvas(mainRight, { -// allowTaint: true, -// scale: 2, // 提升画面质量，但是会增加文件大小 -// }).then(function(canvas) { - -// 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'); -// }); } - getPdf(title) { - let domId='idPdfDom'; - let dom=document.getElementById(domId); - //所有的图片都加上 - let imgList=dom.querySelectorAll('img'); - //console.log('imgList',imgList) - imgList.forEach(function(item){ - item.crossOrigin= 'anonymous'; - }) - let domBody=dom.querySelector('.export-dialog-body'); - //console.log(domBody,'domBody') - let clientHeight=domBody.clientHeight; - let contentHeight=domBody.scrollHeight; - //console.log(domBody.clientHeight,'domBody.clientHeight') - //console.log(domBody.scrollHeight,'domBody.scrollHeight') - // console.log(domBody.clientHeight,'domBody.clientHeight') - // console.log(domBody.clientHeight,'domBody.clientHeight') - //export-dialog-body - //let dom=document.querySelector('#'+domId); - //console.log(dom.length,'dom.length'); - //return; - html2Canvas(dom, { - allowTaint: false, - useCORS:true, - async: true, - scale: '1', // 放大倍数 - dpi: '192', - scrollY: dom.top, // 关键代码，截取长度 - height: dom.height // 加高度，避免截取不全 - }).then(canvas=>{ - //内容的宽度 - let contentWidth = canvas.width; - //内容高度 - let contentHeight = canvas.height; - //一页pdf显示html页面生成的canvas高度,a4纸的尺寸[595.28,841.89]; - let pageHeight = contentWidth / 592.28 * 841.89; - //未生成pdf的html页面高度 - let leftHeight = contentHeight; - //页面偏移 - let position = 0; - //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高 - let imgWidth = 595.28; - let imgHeight = 841.89 / contentWidth * contentHeight; - // let imgHeight = 592.28 / contentWidth * contentHeight; - //canvas转图片数据 - let pageData = canvas.toDataURL('image/jpeg', 1.0); - //新建JsPDF对象 - 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('我的笔记.pdf') - - }); - - } -}; - -export default htmlToPdf; diff --git a/src/views/user/Mynotes.vue b/src/views/user/Mynotes.vue index a596fee5..bd49a2af 100644 --- a/src/views/user/Mynotes.vue +++ b/src/views/user/Mynotes.vue @@ -186,7 +186,6 @@ import AuthorImg from '@/components/Portal/authorImg.vue'; import { mapGetters } from 'vuex'; import {formatDate,formatDateShort} from '@/utils/tools.js'; import apiUser from "@/api/system/user.js"; -import htmlToPdf from '@/utils/htmlToPdf' export default { components:{interactBar,FileUpload,AuthorImg}, computed: { @@ -269,7 +268,7 @@ export default { this.currentImagePath = path; this.dialogVisibleBigImage = true; }, - + routerTo(item) { if(item.courseId) { this.$router.push('/course/studyindex?id='+item.courseId); @@ -328,8 +327,6 @@ export default { author:this.userData.avatar,//this.userInfo.avatar, } if(this.exportType == '1') { - window.scrollTo(0, 0); - htmlToPdf.getPdf('我的笔记'); //apiNote.exportPdf(data); // apiNote.exportPdf(data).then(res=>{