diff --git a/simple-mind-map/src/plugins/Export.js b/simple-mind-map/src/plugins/Export.js index 7820ac72..13bc95be 100644 --- a/simple-mind-map/src/plugins/Export.js +++ b/simple-mind-map/src/plugins/Export.js @@ -175,12 +175,12 @@ class Export { } // 导出为pdf - async pdf(name) { + async pdf(name, useMultiPageExport) { if (!this.mindMap.doExportPDF) { throw new Error('请注册ExportPDF插件') } let img = await this.png() - this.mindMap.doExportPDF.pdf(name, img) + this.mindMap.doExportPDF.pdf(name, img, useMultiPageExport) } // 导出为xmind diff --git a/simple-mind-map/src/plugins/ExportPDF.js b/simple-mind-map/src/plugins/ExportPDF.js index e46b3a3c..27a81374 100644 --- a/simple-mind-map/src/plugins/ExportPDF.js +++ b/simple-mind-map/src/plugins/ExportPDF.js @@ -8,7 +8,16 @@ class ExportPDF { } // 导出为pdf - pdf(name, img) { + pdf(name, img, useMultiPageExport = false) { + if (useMultiPageExport) { + this.multiPageExport(name, img) + } else { + this.onePageExport(name, img) + } + } + + // 单页导出 + onePageExport(name, img) { let pdf = new JsPDF('', 'pt', 'a4') let a4Width = 595 let a4Height = 841 @@ -37,6 +46,52 @@ class ExportPDF { } image.src = img } + + // 多页导出 + 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 + // 未生成pdf的高度 + let leftHeight = imageHeight + // 偏移 + let position = 0 + // a4纸的尺寸[595.28,841.89],图片在pdf中图片的宽高 + let imgWidth = a4Width + let imgHeight = (a4Width / imageWidth) * imageHeight + let pdf = new JsPDF('', 'pt', 'a4') + // 有两个高度需要区分,一个是图片的实际高度,和生成pdf的页面高度(841.89) + // 当内容未超过pdf一页显示的范围,无需分页 + if (leftHeight < pageHeight) { + pdf.addImage( + img, + 'PNG', + (a4Width - imgWidth) / 2, + (a4Height - imgHeight) / 2, + imgWidth, + imgHeight + ) + } else { + // 分页 + while (leftHeight > 0) { + pdf.addImage(img, 'PNG', 0, position, imgWidth, imgHeight) + leftHeight -= pageHeight + position -= a4Height + // 避免添加空白页 + if (leftHeight > 0) { + pdf.addPage() + } + } + } + pdf.save(name) + } + image.src = img + } } ExportPDF.instanceName = 'doExportPDF' diff --git a/web/src/lang/en_us.js b/web/src/lang/en_us.js index b7a8eb85..5302cea9 100644 --- a/web/src/lang/en_us.js +++ b/web/src/lang/en_us.js @@ -108,7 +108,8 @@ export default { notifyTitle: 'Info', notifyMessage: 'If the download is not triggered, check whether it is blocked by the browser', paddingX: 'Padding x', - paddingY: 'Padding y' + paddingY: 'Padding y', + useMultiPageExport: 'Export multi page' }, fullscreen: { fullscreenShow: 'Full screen show', diff --git a/web/src/lang/zh_cn.js b/web/src/lang/zh_cn.js index f09ec097..dca9eb6e 100644 --- a/web/src/lang/zh_cn.js +++ b/web/src/lang/zh_cn.js @@ -108,7 +108,8 @@ export default { notifyTitle: '消息', notifyMessage: '如果没有触发下载,请检查是否被浏览器拦截了', paddingX: '水平内边距', - paddingY: '垂直内边距' + paddingY: '垂直内边距', + useMultiPageExport: '是否多页导出' }, fullscreen: { fullscreenShow: '全屏查看', diff --git a/web/src/pages/Edit/components/Export.vue b/web/src/pages/Edit/components/Export.vue index 35f45957..06552be4 100644 --- a/web/src/pages/Edit/components/Export.vue +++ b/web/src/pages/Edit/components/Export.vue @@ -53,6 +53,12 @@ style="margin-left: 12px" >{{ $t('export.isTransparent') }} + {{ $t('export.useMultiPageExport') }}