diff --git a/package-lock.json b/package-lock.json index a0752d9..c27c1f6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@hufe921/canvas-editor": "^0.9.81", "axios": "^1.7.2", "element-plus": "^2.7.5", + "jspdf": "^2.5.1", "qrcode": "^1.5.3", "qrcodejs2-fix": "^0.0.1", "vue": "^3.4.21", @@ -35,6 +36,17 @@ "node": ">=6.0.0" } }, + "node_modules/@babel/runtime": { + "version": "7.24.7", + "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.24.7.tgz", + "integrity": "sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==", + "dependencies": { + "regenerator-runtime": "^0.14.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/@ctrl/tinycolor": { "version": "3.6.1", "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz", @@ -691,6 +703,12 @@ "@types/lodash": "*" } }, + "node_modules/@types/raf": { + "version": "3.4.3", + "resolved": "https://registry.npmmirror.com/@types/raf/-/raf-3.4.3.tgz", + "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==", + "optional": true + }, "node_modules/@types/web-bluetooth": { "version": "0.0.16", "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz", @@ -919,6 +937,17 @@ "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" }, + "node_modules/atob": { + "version": "2.1.2", + "resolved": "https://registry.npmmirror.com/atob/-/atob-2.1.2.tgz", + "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==", + "bin": { + "atob": "bin/atob.js" + }, + "engines": { + "node": ">= 4.5.0" + } + }, "node_modules/axios": { "version": "1.7.2", "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz", @@ -929,6 +958,26 @@ "proxy-from-env": "^1.1.0" } }, + "node_modules/base64-arraybuffer": { + "version": "1.0.2", + "resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz", + "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==", + "optional": true, + "engines": { + "node": ">= 0.6.0" + } + }, + "node_modules/btoa": { + "version": "1.2.1", + "resolved": "https://registry.npmmirror.com/btoa/-/btoa-1.2.1.tgz", + "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==", + "bin": { + "btoa": "bin/btoa.js" + }, + "engines": { + "node": ">= 0.4.0" + } + }, "node_modules/camelcase": { "version": "5.3.1", "resolved": "https://registry.npmmirror.com/camelcase/-/camelcase-5.3.1.tgz", @@ -937,6 +986,31 @@ "node": ">=6" } }, + "node_modules/canvg": { + "version": "3.0.10", + "resolved": "https://registry.npmmirror.com/canvg/-/canvg-3.0.10.tgz", + "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==", + "optional": true, + "dependencies": { + "@babel/runtime": "^7.12.5", + "@types/raf": "^3.4.0", + "core-js": "^3.8.3", + "raf": "^3.4.1", + "regenerator-runtime": "^0.13.7", + "rgbcolor": "^1.0.1", + "stackblur-canvas": "^2.0.0", + "svg-pathdata": "^6.0.3" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/canvg/node_modules/regenerator-runtime": { + "version": "0.13.11", + "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", + "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==", + "optional": true + }, "node_modules/cliui": { "version": "6.0.0", "resolved": "https://registry.npmmirror.com/cliui/-/cliui-6.0.0.tgz", @@ -974,6 +1048,26 @@ "node": ">= 0.8" } }, + "node_modules/core-js": { + "version": "3.37.1", + "resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.37.1.tgz", + "integrity": "sha512-Xn6qmxrQZyB0FFY8E3bgRXei3lWDJHhvI+u0q9TKIYM49G8pAr0FgnnrFRAmsbptZL1yxRADVXn+x5AGsbBfyw==", + "hasInstallScript": true, + "optional": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/core-js" + } + }, + "node_modules/css-line-break": { + "version": "2.1.0", + "resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz", + "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==", + "optional": true, + "dependencies": { + "utrie": "^1.0.2" + } + }, "node_modules/csstype": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", @@ -1005,6 +1099,12 @@ "resolved": "https://registry.npmmirror.com/dijkstrajs/-/dijkstrajs-1.0.3.tgz", "integrity": "sha512-qiSlmBq9+BCdCA/L46dw8Uy93mloxsPSbwnm5yrKn2vMPiy8KyAskTF6zuV/j5BMsmOGZDPs7KjU+mjb670kfA==" }, + "node_modules/dompurify": { + "version": "2.5.6", + "resolved": "https://registry.npmmirror.com/dompurify/-/dompurify-2.5.6.tgz", + "integrity": "sha512-zUTaUBO8pY4+iJMPE1B9XlO2tXVYIcEA4SNGtvDELzTSCQO7RzH+j7S180BmhmJId78lqGU2z19vgVx2Sxs/PQ==", + "optional": true + }, "node_modules/element-plus": { "version": "2.7.5", "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.7.5.tgz", @@ -1099,6 +1199,11 @@ "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz", "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==" }, + "node_modules/fflate": { + "version": "0.4.8", + "resolved": "https://registry.npmmirror.com/fflate/-/fflate-0.4.8.tgz", + "integrity": "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA==" + }, "node_modules/find-up": { "version": "4.1.0", "resolved": "https://registry.npmmirror.com/find-up/-/find-up-4.1.0.tgz", @@ -1165,6 +1270,19 @@ "node": "6.* || 8.* || >= 10.*" } }, + "node_modules/html2canvas": { + "version": "1.4.1", + "resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz", + "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==", + "optional": true, + "dependencies": { + "css-line-break": "^2.1.0", + "text-segmentation": "^1.0.3" + }, + "engines": { + "node": ">=8.0.0" + } + }, "node_modules/is-fullwidth-code-point": { "version": "3.0.0", "resolved": "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", @@ -1173,6 +1291,23 @@ "node": ">=8" } }, + "node_modules/jspdf": { + "version": "2.5.1", + "resolved": "https://registry.npmmirror.com/jspdf/-/jspdf-2.5.1.tgz", + "integrity": "sha512-hXObxz7ZqoyhxET78+XR34Xu2qFGrJJ2I2bE5w4SM8eFaFEkW2xcGRVUss360fYelwRSid/jT078kbNvmoW0QA==", + "dependencies": { + "@babel/runtime": "^7.14.0", + "atob": "^2.1.2", + "btoa": "^1.2.1", + "fflate": "^0.4.8" + }, + "optionalDependencies": { + "canvg": "^3.0.6", + "core-js": "^3.6.0", + "dompurify": "^2.2.0", + "html2canvas": "^1.0.0-rc.5" + } + }, "node_modules/locate-path": { "version": "5.0.0", "resolved": "https://registry.npmmirror.com/locate-path/-/locate-path-5.0.0.tgz", @@ -1299,6 +1434,12 @@ "node": ">=8" } }, + "node_modules/performance-now": { + "version": "2.1.0", + "resolved": "https://registry.npmmirror.com/performance-now/-/performance-now-2.1.0.tgz", + "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==", + "optional": true + }, "node_modules/picocolors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz", @@ -1366,6 +1507,20 @@ "resolved": "https://registry.npmmirror.com/qrcodejs2-fix/-/qrcodejs2-fix-0.0.1.tgz", "integrity": "sha512-1R6jB87k1PUwjX65hh24FftDjrghPvryYfsajV3chCp//dQb8QUeL446DVLj2SIeotP8ro9rSYri0wOp7O+7Hg==" }, + "node_modules/raf": { + "version": "3.4.1", + "resolved": "https://registry.npmmirror.com/raf/-/raf-3.4.1.tgz", + "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==", + "optional": true, + "dependencies": { + "performance-now": "^2.1.0" + } + }, + "node_modules/regenerator-runtime": { + "version": "0.14.1", + "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" + }, "node_modules/require-directory": { "version": "2.1.1", "resolved": "https://registry.npmmirror.com/require-directory/-/require-directory-2.1.1.tgz", @@ -1379,6 +1534,15 @@ "resolved": "https://registry.npmmirror.com/require-main-filename/-/require-main-filename-2.0.0.tgz", "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==" }, + "node_modules/rgbcolor": { + "version": "1.0.1", + "resolved": "https://registry.npmmirror.com/rgbcolor/-/rgbcolor-1.0.1.tgz", + "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==", + "optional": true, + "engines": { + "node": ">= 0.8.15" + } + }, "node_modules/rollup": { "version": "4.18.0", "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.18.0.tgz", @@ -1432,6 +1596,15 @@ "node": ">=0.10.0" } }, + "node_modules/stackblur-canvas": { + "version": "2.7.0", + "resolved": "https://registry.npmmirror.com/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz", + "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==", + "optional": true, + "engines": { + "node": ">=0.1.14" + } + }, "node_modules/string-width": { "version": "4.2.3", "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz", @@ -1456,11 +1629,38 @@ "node": ">=8" } }, + "node_modules/svg-pathdata": { + "version": "6.0.3", + "resolved": "https://registry.npmmirror.com/svg-pathdata/-/svg-pathdata-6.0.3.tgz", + "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==", + "optional": true, + "engines": { + "node": ">=12.0.0" + } + }, + "node_modules/text-segmentation": { + "version": "1.0.3", + "resolved": "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz", + "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==", + "optional": true, + "dependencies": { + "utrie": "^1.0.2" + } + }, "node_modules/tslib": { "version": "2.6.3", "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.6.3.tgz", "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==" }, + "node_modules/utrie": { + "version": "1.0.2", + "resolved": "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz", + "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==", + "optional": true, + "dependencies": { + "base64-arraybuffer": "^1.0.2" + } + }, "node_modules/vite": { "version": "5.2.13", "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.13.tgz", diff --git a/package.json b/package.json index 5bc9cb5..81c70a3 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "@hufe921/canvas-editor": "^0.9.81", "axios": "^1.7.2", "element-plus": "^2.7.5", + "jspdf": "^2.5.1", "qrcode": "^1.5.3", "qrcodejs2-fix": "^0.0.1", "vue": "^3.4.21", diff --git a/src/App.vue b/src/App.vue index c019b43..db08a1c 100644 --- a/src/App.vue +++ b/src/App.vue @@ -7,9 +7,11 @@ import TheWelcome from './components/TheWelcome.vue'
- 保存配置 - 预览 - 切换配置 + 保存配置 + 保存pdf并上传 + 隐藏配置 + 预览 + 切换配置
@@ -351,19 +353,19 @@ import TheWelcome from './components/TheWelcome.vue'
--> -
+
-
+ +
    -
  • 分页
    • -
  • 连页
    • +
  • 分页
    • +
  • 连页
@@ -371,45 +373,45 @@ import TheWelcome from './components/TheWelcome.vue' 页面：1/1 字数：0
-
编辑模式
+
编辑模式
-
+
- 100% -
+ 100% +
-
+
    -
  • A4
    • -
  • A2
    • -
  • A3
    • -
  • A5
    • -
  • 5号信封
    • -
  • 6号信封
    • -
  • 7号信封
    • -
  • 9号信封
    • -
  • 法律用纸
    • -
  • 信纸
    • +
  • A4
    • +
  • A2
    • +
  • A3
    • +
  • A5
    • +
  • 5号信封
    • +
  • 6号信封
    • +
  • 7号信封
    • +
  • 9号信封
    • +
  • 法律用纸
    • +
  • 信纸
-
+
    -
  • 纵向
    • -
  • 横向
    • +
  • 纵向
    • +
  • 横向
-
+
-
+
- - - 单击即复制成功 @@ -497,6 +495,8 @@ import axios from 'axios' import { ElMessage } from 'element-plus' import QRCode from 'qrcodejs2-fix' import { Dialog } from './components/dialog/Dialog' +import jsPDF from 'jspdf' +import { debounce, nextTick, scrollIntoView } from './utils' export default { data() { return { @@ -523,13 +523,63 @@ export default { searchField:{}, doc:{}, myDiv: null, - orderType:0 + orderType:0, + modeIndex:0 } }, mounted() { this.login() }, methods: { + savePdf(){ + const element = document.getElementsByTagName('canvas') + this.htmlToPDF(element[0], 'a11a') + }, + htmlToPDF(canvas, pdfName) { + const pdf = new jsPDF('p', 'mm', 'a4') + // 将Canvas转换为图片 + const imgData = canvas.toDataURL('image/png') + // 计算图片尺寸以适应PDF + const imgProps= pdf.getImageProperties(imgData) + const pdfWidth = pdf.internal.pageSize.getWidth() + const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width + const imgWidth = pdfWidth + const imgHeight = pdfHeight + + // 将图片添加到PDF中 + const x = 0; + const y = 0; + const options = { + width: imgWidth, + height: imgHeight, + } + pdf.addImage(imgData, 'PNG', x, y, options.width, options.height) + // 保存生成的PDF + pdf.save(pdfName + '.pdf') + const blob = pdf.output("blob") + this.uoloadFile(blob) + }, + uoloadFile(blob) { + const formData = new FormData() + formData.append('file', blob, 'myPDF.pdf') + let api = '/api/Administrator/file/upload' + formData.append('files', blob, 'myPDF.pdf'); + + // 使用fetch API上传文件到服务器 + fetch(api, { + method: 'POST', + body: formData + }) + .then(response => response.json()) + .then(data => { + ElMessage({ + message: data.msg, + type: data.code == 1 ? 'success' : 'error', + plain: true, + }) + }) + .catch(error => console.error(error)) + }, handleGenerate(idName, name) { // 采集二维码：路径 const url = 'https://www.baihand.com?order_id=' + name//`${getIPAddress}?companyId=80&saleId=${name}`; @@ -555,19 +605,19 @@ export default { }, getShow() { this.updateStatus = true - this.init([]) + this.init() }, isUpdate() { if (this.tableCol == '' || this.tableCol == '0') { return false } this.updateStatus = true - this.init([]) + this.init() }, changeConfig() { this.updateStatus = false - this.init([]) + this.init() }, login() { @@ -649,7 +699,7 @@ export default { const element = proIdData[l]; this.getGongXu(element, l) } - this.init(orderData) + this.init() })) }, async getGongXu(data, i){ @@ -664,8 +714,8 @@ export default { this.nameField = Object.assign({}, this.nameField, nameField) }, getHTMLValuea() { + //const aaa = this.instance.command.getHTML() const ccc = this.instance.command.getValue() - //console.log(ccc) //localStorage.setItem('word_data', JSON.stringify(ccc.data)) let saveData = {'type':this.orderType, 'field_style':ccc.data} let api = '/api/Administrator/OrderFieldStyle/save' @@ -785,7 +835,7 @@ export default { let tdValue = tdListItem.value[0].value let newValue = this.getFieldValue(tdValue, order) - let wocao = { + let item = { 'colspan': tdListItem.colspan, 'rowspan': tdListItem.rowspan, 'value': [ @@ -796,7 +846,7 @@ export default { ] } - tempTdList.push(wocao) + tempTdList.push(item) } let tempTr = { 'height':trListItem.height, @@ -838,11 +888,13 @@ export default { return value }, - init(showData) { - + init() { + //console.log('doc',JSON.parse(JSON.stringify(this.doc))) let _this = this let api = '/api/Administrator/OrderFieldStyle/getUserConfig?type=' + this.orderType - const res = axios.get(api).then((res) => { + axios.get(api).then((res) => { + res = JSON.parse(JSON.stringify(res)) + //console.log(res) let doc = {} if(res.data.code == 1) { doc = res.data.data.field_style @@ -853,6 +905,8 @@ export default { }, initDoc(showData) { + //showData = localStorage.getItem('word_data') + //showData = JSON.parse(showData) if (Object.keys(showData).length === 0) { showData = { header: [], @@ -877,6 +931,7 @@ export default { showData, {} ) + this.handleContentChange() this.editorLisener() }, @@ -1145,7 +1200,12 @@ export default { dateDomOptionDom.querySelector('li:last-child').innerText =dateTimeString }, - + executePageScaleMinus(){ + this.instance.command.executePageScaleMinus() + }, + executePageScaleAdd() { + this.instance.command.executePageScaleAdd() + }, separatorDom() { const separatorDom = document.querySelector('.menu-item__separator') const separatorOptionDom = separatorDom.querySelector('.options') @@ -1267,7 +1327,182 @@ export default { } }, + executePageScaleRecovery() { + this.instance.command.executePageScaleRecovery() + }, + paperSizeDomOptionsShow() { + const paperSizeDom = document.querySelector('.paper-size') + const paperSizeDomOptionsDom =paperSizeDom.querySelector('.options') + paperSizeDomOptionsDom.classList.toggle('visible') + }, + executePaperSize(evt) { + const paperSizeDom = document.querySelector('.paper-size') + const paperSizeDomOptionsDom =paperSizeDom.querySelector('.options') + const li = evt.target + const paperType = li.dataset.paperSize + const [width, height] = paperType.split('*').map(Number) + this.instance.command.executePaperSize(width, height) + // 纸张状态回显 + paperSizeDomOptionsDom.querySelectorAll('li') + .forEach(child => child.classList.remove('active')) + li.classList.add('active') + }, + paperDirectionDomOptionsDomShow(){ + const paperDirectionDom = document.querySelector('.paper-direction') + const paperDirectionDomOptionsDom =paperDirectionDom.querySelector('.options') + paperDirectionDomOptionsDom.classList.toggle('visible') + }, + executePaperDirection(evt) { + const paperDirectionDom = document.querySelector('.paper-direction') + const paperDirectionDomOptionsDom =paperDirectionDom.querySelector('.options') + const li = evt.target + const paperDirection = li.dataset.paperDirection + this.instance.command.executePaperDirection(paperDirection) + // 纸张方向状态回显 + paperDirectionDomOptionsDom + .querySelectorAll('li') + .forEach(child => child.classList.remove('active')) + li.classList.add('active') + }, + executeSetPaperMargin() { + const [topMargin, rightMargin, bottomMargin, leftMargin] = this.instance.command.getPaperMargin() + let _this = this + new Dialog({ + title: '页边距', + data: [ + { + type: 'text', + label: '上边距', + name: 'top', + required: true, + value: `${topMargin}`, + placeholder: '请输入上边距' + }, + { + type: 'text', + label: '下边距', + name: 'bottom', + required: true, + value: `${bottomMargin}`, + placeholder: '请输入下边距' + }, + { + type: 'text', + label: '左边距', + name: 'left', + required: true, + value: `${leftMargin}`, + placeholder: '请输入左边距' + }, + { + type: 'text', + label: '右边距', + name: 'right', + required: true, + value: `${rightMargin}`, + placeholder: '请输入右边距' + } + ], + onConfirm: payload => { + const top = payload.find(p => p.name === 'top')?.value + if (!top) return + const bottom = payload.find(p => p.name === 'bottom')?.value + if (!bottom) return + const left = payload.find(p => p.name === 'left')?.value + if (!left) return + const right = payload.find(p => p.name === 'right')?.value + if (!right) return + this.instance.command.executeSetPaperMargin([ + Number(top), + Number(right), + Number(bottom), + Number(left) + ]) + } + }) + + }, + fullscreen() { + this.toggleFullscreen() + }, + toggleFullscreen() { + const fullscreenDom = document.querySelector('.fullscreen') + fullscreenDom.classList.toggle('exist') + if (!document.fullscreenElement) { + document.documentElement.requestFullscreen() + } else { + document.exitFullscreen() + } + }, + executeMode(){ + const modeList = [ + { + mode: EditorMode.EDIT, + name: '编辑模式' + }, + { + mode: EditorMode.CLEAN, + name: '清洁模式' + }, + { + mode: EditorMode.READONLY, + name: '只读模式' + }, + { + mode: EditorMode.FORM, + name: '表单模式' + }, + { + mode: EditorMode.PRINT, + name: '打印模式' + } + ] + this.modeIndex === modeList.length - 1 ? (this.modeIndex = 0) : this.modeIndex++ + // 设置模式 + const { name, mode } = modeList[this.modeIndex] + const modeElement = document.querySelector('.editor-mode') + modeElement.innerText = name + this.instance.command.executeMode(mode) + // 设置菜单栏权限视觉反馈 + const isReadonly = mode === EditorMode.READONLY + const enableMenuList = ['search', 'print'] + document.querySelectorAll('.menu-item>div').forEach(dom => { + const menu = dom.dataset.menu + isReadonly && (!menu || !enableMenuList.includes(menu)) + ? dom.classList.add('disable') + : dom.classList.remove('disable') + }) + }, + async handleContentChange() { + const wordCount = await this.instance.command.getWordCount() + document.querySelector('.word-count').innerText = `${wordCount || 0 + }` + // 目录 + /* if (isCatalogShow) { + nextTick(() => { + updateCatalog() + }) + } + // 批注 + nextTick(() => { + updateComment() + }) */ + }, + pageModeDomShow() { + const pageModeDom = document.querySelector('.page-mode') + const pageModeOptionsDom =pageModeDom.querySelector('.options') + pageModeOptionsDom.classList.toggle('visible') + }, + executePageMode (evt) { + const li = evt.target + this.instance.command.executePageMode(li.dataset.pageMode) + }, editorLisener(){ + this.instance.listener.contentChange = debounce(this.handleContentChange, 200) + + this.instance.listener.pageScaleChange = function (payload) { + document.querySelector('.page-scale-percentage').innerText = `${Math.floor(payload * 10 * 10)}%` + } this.instance.listener.rangeStyleChange = function (payload) { //console.log(payload) const colorControlDom = document.querySelector('#color') diff --git a/src/utils/index.ts b/src/utils/index.ts new file mode 100644 index 0000000..7bfc5f7 --- /dev/null +++ b/src/utils/index.ts @@ -0,0 +1,42 @@ +export function debounce(func: Function, delay: number) { + let timer: number + return function (this: any, ...args: any[]) { + if (timer) { + window.clearTimeout(timer) + } + timer = window.setTimeout(() => { + func.apply(this, args) + }, delay) + } +} + +export function scrollIntoView(container: HTMLElement, selected: HTMLElement) { + if (!selected) { + container.scrollTop = 0 + return + } + const offsetParents: HTMLElement[] = [] + let pointer = selected.offsetParent + while (pointer && container !== pointer && container.contains(pointer)) { + offsetParents.push(pointer) + pointer = pointer.offsetParent + } + const top = + selected.offsetTop + + offsetParents.reduce((prev, curr) => prev + curr.offsetTop, 0) + const bottom = top + selected.offsetHeight + const viewRectTop = container.scrollTop + const viewRectBottom = viewRectTop + container.clientHeight + if (top < viewRectTop) { + container.scrollTop = top + } else if (bottom > viewRectBottom) { + container.scrollTop = bottom - container.clientHeight + } +} + +export function nextTick(fn: Function) { + const callback = window.requestIdleCallback || window.setTimeout + callback(() => { + fn() + }) +} diff --git a/src/utils/prism.ts b/src/utils/prism.ts new file mode 100644 index 0000000..993f32d --- /dev/null +++ b/src/utils/prism.ts @@ -0,0 +1,89 @@ +interface IPrismKindStyle { + color?: string + italic?: boolean + opacity?: number + bold?: boolean +} + +export function getPrismKindStyle(payload: string): IPrismKindStyle | null { + switch (payload) { + case 'comment': + case 'prolog': + case 'doctype': + case 'cdata': + return { color: '#008000', italic: true } + case 'namespace': + return { opacity: 0.7 } + case 'string': + return { color: '#A31515' } + case 'punctuation': + case 'operator': + return { color: '#393A34' } + case 'url': + case 'symbol': + case 'number': + case 'boolean': + case 'variable': + case 'constant': + case 'inserted': + return { color: '#36acaa' } + case 'atrule': + case 'keyword': + case 'attr-value': + return { color: '#0000ff' } + case 'function': + return { color: '#b9a40a' } + case 'deleted': + case 'tag': + return { color: '#9a050f' } + case 'selector': + return { color: '#00009f' } + case 'important': + return { color: '#e90', bold: true } + case 'italic': + return { italic: true } + case 'class-name': + case 'property': + return { color: '#2B91AF' } + case 'attr-name': + case 'regex': + case 'entity': + return { color: '#ff0000' } + default: + return null + } +} + +type IFormatPrismToken = { + type?: string + content: string +} & IPrismKindStyle + +export function formatPrismToken( + payload: (Prism.Token | string)[] +): IFormatPrismToken[] { + const formatTokenList: IFormatPrismToken[] = [] + function format(tokenList: (Prism.Token | string)[]) { + for (let i = 0; i < tokenList.length; i++) { + const element = tokenList[i] + if (typeof element === 'string') { + formatTokenList.push({ + content: element + }) + } else if (Array.isArray(element.content)) { + format(element.content) + } else { + const { type, content } = element + if (typeof content === 'string') { + formatTokenList.push({ + type, + content, + ...getPrismKindStyle(type) + }) + } + } + } + } + format(payload) + return formatTokenList +}