From 3763cd0efca1655a0aeeeb65dac3f5878719748b Mon Sep 17 00:00:00 2001 From: wanglin2 <1013335014@qq.com> Date: Sat, 26 Aug 2023 21:54:00 +0800 Subject: [PATCH] =?UTF-8?q?Feat:=E4=BF=AE=E6=94=B9=E5=AF=BC=E5=87=BA?= =?UTF-8?q?=E5=9B=BE=E7=89=87=E6=96=B9=E6=B3=95=E7=9A=84=E5=8F=82=E6=95=B0?= =?UTF-8?q?,=E5=AF=BC=E5=87=BApdf=E6=97=B6=E5=A6=82=E6=9E=9C=E6=80=9D?= =?UTF-8?q?=E7=BB=B4=E5=AF=BC=E5=9B=BE=E5=B0=BA=E5=AF=B8=E5=B0=8F=E4=BA=8E?= =?UTF-8?q?a4=E7=BA=B8=E9=82=A3=E4=B9=88=E4=B8=8D=E6=97=8B=E8=BD=AC?= =?UTF-8?q?=E6=96=B9=E5=90=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- simple-mind-map/src/constants/constant.js | 6 +++++ simple-mind-map/src/plugins/Export.js | 17 ++++++++----- simple-mind-map/src/plugins/ExportPDF.js | 31 ++++++++++------------- 3 files changed, 30 insertions(+), 24 deletions(-) diff --git a/simple-mind-map/src/constants/constant.js b/simple-mind-map/src/constants/constant.js index f07b162f..13202200 100644 --- a/simple-mind-map/src/constants/constant.js +++ b/simple-mind-map/src/constants/constant.js @@ -342,4 +342,10 @@ export const ERROR_TYPES = { LOAD_CLIPBOARD_IMAGE_ERROR: 'load_clipboard_image_error', BEFORE_TEXT_EDIT_ERROR: 'before_text_edit_error', EXPORT_ERROR: 'export_error' +} + +// a4纸的宽高 +export const a4Size = { + width: 592.28, + height: 841.89 } \ No newline at end of file diff --git a/simple-mind-map/src/plugins/Export.js b/simple-mind-map/src/plugins/Export.js index 08c8ec3c..bb8dd3a6 100644 --- a/simple-mind-map/src/plugins/Export.js +++ b/simple-mind-map/src/plugins/Export.js @@ -7,6 +7,7 @@ import { import { SVG } from '@svgdotjs/svg.js' import drawBackgroundImageToCanvas from '../utils/simulateCSSBackgroundInCanvas' import { transformToMarkdown } from '../parse/toMarkdown' +import { a4Size } from '../constants/constant' // 导出插件 class Export { @@ -57,7 +58,7 @@ class Export { } // svg转png - svgToPng(svgSrc, transparent, rotateWhenWidthLongerThenHeight = false) { + svgToPng(svgSrc, transparent, checkRotate = () => { return false }) { return new Promise((resolve, reject) => { const img = new Image() // 跨域图片需要添加这个属性，否则画布被污染了无法导出图片 @@ -66,8 +67,7 @@ class Export { try { let canvas = document.createElement('canvas') // 如果宽比高长，那么旋转90度 - let needRotate = - rotateWhenWidthLongerThenHeight && img.width / img.height > 1 + let needRotate = checkRotate(img.width, img.height) if (needRotate) { canvas.width = img.height canvas.height = img.width @@ -179,7 +179,7 @@ class Export { * 方法1.把svg的图片都转化成data:url格式，再转换 * 方法2.把svg的图片提取出来再挨个绘制到canvas里，最后一起转换 */ - async png(name, transparent = false, rotateWhenWidthLongerThenHeight) { + async png(name, transparent = false, checkRotate) { let { node, str } = await this.getSvgData() str = removeHTMLEntities(str) // 如果开启了富文本，则使用htmltocanvas转换为图片 @@ -195,7 +195,7 @@ class Export { // let imgDataUrl = await this.svgToPng( // res, // transparent, - // rotateWhenWidthLongerThenHeight + // checkRotate // ) // return imgDataUrl } @@ -209,7 +209,7 @@ class Export { let res = await this.svgToPng( svgUrl, transparent, - rotateWhenWidthLongerThenHeight + checkRotate ) return res } @@ -219,7 +219,10 @@ class Export { if (!this.mindMap.doExportPDF) { throw new Error('请注册ExportPDF插件') } - let img = await this.png('', false, true) + let img = await this.png('', false, (width, height) => { + if (width <= a4Size.width && height && a4Size.height) return false + return (width / height) > 1 + }) this.mindMap.doExportPDF.pdf(name, img, useMultiPageExport) } diff --git a/simple-mind-map/src/plugins/ExportPDF.js b/simple-mind-map/src/plugins/ExportPDF.js index 27a81374..83f7ee88 100644 --- a/simple-mind-map/src/plugins/ExportPDF.js +++ b/simple-mind-map/src/plugins/ExportPDF.js @@ -1,4 +1,5 @@ import JsPDF from 'jspdf' +import { a4Size } from '../constants/constant' // 导出PDF插件，需要通过Export插件使用 class ExportPDF { @@ -19,29 +20,27 @@ class ExportPDF { // 单页导出 onePageExport(name, img) { let pdf = new JsPDF('', 'pt', 'a4') - let a4Width = 595 - let a4Height = 841 - let a4Ratio = a4Width / a4Height + let a4Ratio = a4Size.width / a4Size.height let image = new Image() image.onload = () => { let imageWidth = image.width let imageHeight = image.height let imageRatio = imageWidth / imageHeight let w, h - if (imageWidth <= a4Width && imageHeight <= a4Height) { + if (imageWidth <= a4Size.width && imageHeight <= a4Size.height) { // 使用图片原始宽高 w = imageWidth h = imageHeight } else if (a4Ratio > imageRatio) { // 以a4Height为高度，缩放图片宽度 - w = imageRatio * a4Height - h = a4Height + w = imageRatio * a4Size.height + h = a4Size.height } else { // 以a4Width为宽度，缩放图片高度 - w = a4Width - h = a4Width / imageRatio + w = a4Size.width + h = a4Size.width / imageRatio } - pdf.addImage(img, 'PNG', (a4Width - w) / 2, (a4Height - h) / 2, w, h) + pdf.addImage(img, 'PNG', (a4Size.width - w) / 2, (a4Size.height - h) / 2, w, h) pdf.save(name) } image.src = img @@ -50,20 +49,18 @@ class ExportPDF { // 多页导出 multiPageExport(name, img) { let image = new Image() - const a4Width = 592.28 - const a4Height = 841.89 image.onload = () => { let imageWidth = image.width let imageHeight = image.height // 一页pdf显示高度 - let pageHeight = (imageWidth / a4Width) * a4Height + let pageHeight = (imageWidth / a4Size.width) * a4Size.height // 未生成pdf的高度 let leftHeight = imageHeight // 偏移 let position = 0 // a4纸的尺寸[595.28,841.89]，图片在pdf中图片的宽高 - let imgWidth = a4Width - let imgHeight = (a4Width / imageWidth) * imageHeight + let imgWidth = a4Size.width + let imgHeight = (a4Size.width / imageWidth) * imageHeight let pdf = new JsPDF('', 'pt', 'a4') // 有两个高度需要区分，一个是图片的实际高度，和生成pdf的页面高度(841.89) // 当内容未超过pdf一页显示的范围，无需分页 @@ -71,8 +68,8 @@ class ExportPDF { pdf.addImage( img, 'PNG', - (a4Width - imgWidth) / 2, - (a4Height - imgHeight) / 2, + (a4Size.width - imgWidth) / 2, + (a4Size.height - imgHeight) / 2, imgWidth, imgHeight ) @@ -81,7 +78,7 @@ class ExportPDF { while (leftHeight > 0) { pdf.addImage(img, 'PNG', 0, position, imgWidth, imgHeight) leftHeight -= pageHeight - position -= a4Height + position -= a4Size.height // 避免添加空白页 if (leftHeight > 0) { pdf.addPage()