From ca5ac89a24c6ace3fb7897b4b238b243059dcb43 Mon Sep 17 00:00:00 2001 From: riku <risaku@163.com> Date: 星期一, 18 十一月 2024 09:32:18 +0800 Subject: [PATCH] 1. word生成优化图片大小生成逻辑 --- src/utils/doc.js | 136 +++++++++++++++++++++++++++++++++++---------- src/components.d.ts | 16 +++++ 2 files changed, 121 insertions(+), 31 deletions(-) diff --git a/src/components.d.ts b/src/components.d.ts index 560e134..5de0064 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -12,18 +12,23 @@ BasePanelLayout: typeof import('./components/core/BasePanelLayout.vue')['default'] CompQuickSet: typeof import('./components/search-option/CompQuickSet.vue')['default'] Content: typeof import('./components/core/Content.vue')['default'] + ElAffix: typeof import('element-plus/es')['ElAffix'] ElAside: typeof import('element-plus/es')['ElAside'] ElAvatar: typeof import('element-plus/es')['ElAvatar'] ElBadge: typeof import('element-plus/es')['ElBadge'] ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb'] ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem'] ElButton: typeof import('element-plus/es')['ElButton'] + ElCalendar: typeof import('element-plus/es')['ElCalendar'] ElCard: typeof import('element-plus/es')['ElCard'] + ElCascader: typeof import('element-plus/es')['ElCascader'] + ElCheckbox: typeof import('element-plus/es')['ElCheckbox'] ElCol: typeof import('element-plus/es')['ElCol'] ElCollapse: typeof import('element-plus/es')['ElCollapse'] ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem'] ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider'] ElContainer: typeof import('element-plus/es')['ElContainer'] + ElDatePicker: typeof import('element-plus/es')['ElDatePicker'] ElDescriptions: typeof import('element-plus/es')['ElDescriptions'] ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem'] ElDialog: typeof import('element-plus/es')['ElDialog'] @@ -36,25 +41,36 @@ ElIcon: typeof import('element-plus/es')['ElIcon'] ElImage: typeof import('element-plus/es')['ElImage'] ElInput: typeof import('element-plus/es')['ElInput'] + ElInputNumber: typeof import('element-plus/es')['ElInputNumber'] + ElLink: typeof import('element-plus/es')['ElLink'] ElMain: typeof import('element-plus/es')['ElMain'] ElMenu: typeof import('element-plus/es')['ElMenu'] ElMenuItem: typeof import('element-plus/es')['ElMenuItem'] ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup'] ElOption: typeof import('element-plus/es')['ElOption'] + ElPagination: typeof import('element-plus/es')['ElPagination'] + ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm'] ElPopover: typeof import('element-plus/es')['ElPopover'] + ElRadio: typeof import('element-plus/es')['ElRadio'] + ElRadioButton: typeof import('element-plus/es')['ElRadioButton'] + ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup'] ElRow: typeof import('element-plus/es')['ElRow'] ElScrollbar: typeof import('element-plus/es')['ElScrollbar'] + ElSegmented: typeof import('element-plus/es')['ElSegmented'] ElSelect: typeof import('element-plus/es')['ElSelect'] ElSpace: typeof import('element-plus/es')['ElSpace'] ElStep: typeof import('element-plus/es')['ElStep'] ElSteps: typeof import('element-plus/es')['ElSteps'] ElSubMenu: typeof import('element-plus/es')['ElSubMenu'] + ElSwitch: typeof import('element-plus/es')['ElSwitch'] ElTable: typeof import('element-plus/es')['ElTable'] ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] ElTabPane: typeof import('element-plus/es')['ElTabPane'] ElTabs: typeof import('element-plus/es')['ElTabs'] ElTag: typeof import('element-plus/es')['ElTag'] ElText: typeof import('element-plus/es')['ElText'] + ElTooltip: typeof import('element-plus/es')['ElTooltip'] + ElTransfer: typeof import('element-plus/es')['ElTransfer'] ElTree: typeof import('element-plus/es')['ElTree'] ElUpload: typeof import('element-plus/es')['ElUpload'] Footer: typeof import('./components/core/Footer.vue')['default'] diff --git a/src/utils/doc.js b/src/utils/doc.js index 5e30908..25115f2 100644 --- a/src/utils/doc.js +++ b/src/utils/doc.js @@ -3,9 +3,100 @@ import docxtemplater from 'docxtemplater'; import ImageModule from 'docxtemplater-image-module-free'; import Pizzip from 'pizzip'; -import PizZipUtils from 'pizzip/utils/dist/pizzip-utils'; import FileSaver from 'file-saver'; -import fs from 'fs'; + +/** + * 绛夋瘮渚嬬缉鏀惧浘鐗� + * 鏍规嵁鍥剧墖鐨勯暱瀹芥瘮杩涜涓嶅悓鏂瑰紡鐨勭缉鏀� + * 濡傛灉瀹藉害澶т簬楂樺害锛堟í鎷嶅浘鐗囷級锛屽垯鎸夌収璁惧畾楂樺害绛夋瘮缂╂斁锛� + * 濡傛灉瀹藉害灏忎簬楂樺害锛堢珫鎷嶅浘鐗囷級锛屽垯鎸夌収璁惧畾瀹藉害绛夋瘮缂╂斁锛� + * @param {Number} horizontalHeight 璁惧畾楂樺害 + * @param {Number} verticalWidth 璁惧畾瀹藉害 + * @param {*} img + * @param {*} tagValue + * @param {*} tagName + * @returns + */ +function getSizeProportional( + horizontalHeight, + verticalWidth, + img, + tagValue, + tagName +) { + return new Promise(function (resolve, reject) { + const image = new Image(); + image.src = tagValue; + image.onload = function () { + let width = image.width; + let height = image.height; + // console.log('width height', width, height); + + if (width > height && horizontalHeight && height > horizontalHeight) { + const scale = image.height / horizontalHeight; + height = horizontalHeight; + width = image.width / scale; + } else if (width <= height && verticalWidth && width > verticalWidth) { + const scale = image.width / verticalWidth; + width = verticalWidth; + height = image.height / scale; + } + // console.log('scale', width, height); + + resolve([width, height]); + }; + image.onerror = function (e) { + console.log('img, tagValue, tagName : ', img, tagValue, tagName); + alert('An error occured while loading ' + tagValue); + reject(e); + }; + }); +} + +/** + * 鍥哄畾澶у皬缂╂斁鍥剧墖 + * 鏍规嵁鍥剧墖鐨勯暱瀹芥瘮杩涜涓嶅悓鏂瑰紡鐨勭缉鏀� + * 濡傛灉瀹藉害澶т簬楂樺害锛堟í鎷嶅浘鐗囷級锛屽垯鎸夌収璁惧畾楂樺害鍜屽楂樻瘮缂╂斁锛� + * 濡傛灉瀹藉害灏忎簬楂樺害锛堢珫鎷嶅浘鐗囷級锛屽垯鎸夌収璁惧畾瀹藉害鍜屽楂樻瘮缂╂斁锛� + * @param {*} horizontalHeight 璁惧畾楂樺害 + * @param {*} verticalWidth 璁惧畾瀹藉害 + * @param {*} scale 缂╂斁姣斾緥锛岄暱杈归櫎鐭竟鐨勬瘮渚嬬郴鏁� + * @param {*} img + * @param {*} tagValue + * @param {*} tagName + * @returns + */ +function getSizeFixed( + horizontalHeight, + verticalWidth, + scale, + img, + tagValue, + tagName +) { + return new Promise(function (resolve, reject) { + const image = new Image(); + image.src = tagValue; + image.onload = function () { + let width = image.width; + let height = image.height; + + if (width > height && horizontalHeight && height > horizontalHeight && scale) { + height = horizontalHeight; + width = horizontalHeight * scale; + } else if (width <= height && verticalWidth && width > verticalWidth && scale) { + width = verticalWidth; + height = verticalWidth * scale; + } + resolve([width, height]); + }; + image.onerror = function (e) { + console.log('img, tagValue, tagName : ', img, tagValue, tagName); + alert('An error occured while loading ' + tagValue); + reject(e); + }; + }); +} /** * 鑾峰彇鍥剧墖閰嶇疆淇℃伅 @@ -14,8 +105,8 @@ * @returns */ function getImageOptions(options) { - const horizontalHeight = options ? options.horizontalHeight : undefined - const verticalWidth = options ? options.verticalWidth : undefined + const horizontalHeight = options ? options.horizontalHeight : undefined; + const verticalWidth = options ? options.verticalWidth : undefined; return { centered: false, fileType: 'docx', @@ -30,34 +121,17 @@ }); }); }, + getSize(img, tagValue, tagName) { - return new Promise(function (resolve, reject) { - const image = new Image(); - image.src = tagValue; - image.onload = function () { - let width = image.width; - let height = image.height; - // console.log('width height', width, height); - - if (width > height && horizontalHeight && height > horizontalHeight) { - const scale = image.height / horizontalHeight; - height = horizontalHeight; - width = image.width / scale; - } else if (width <= height && verticalWidth && width > verticalWidth) { - const scale = image.width / verticalWidth; - width = verticalWidth; - height = image.height / scale; - } - // console.log('scale', width, height); - - resolve([width, height]); - }; - image.onerror = function (e) { - console.log('img, tagValue, tagName : ', img, tagValue, tagName); - alert('An error occured while loading ' + tagValue); - reject(e); - }; - }); + // return getSizeProportional(horizontalHeight, verticalWidth, img, tagValue, tagName) + return getSizeFixed( + horizontalHeight, + verticalWidth, + options.scale, + img, + tagValue, + tagName + ); } }; } -- Gitblit v1.9.3