sh-view 1.6.0 → 1.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sh-view",
-  "version": "1.6.0",
+  "version": "1.6.5",
   "description": "基于vxe-table、view-ui-plus二次封装",
   "main": "packages/index.js",
   "scripts": {
@@ -17,11 +17,13 @@
     "@codemirror/lang-sql": "^6.5.2",
     "@codemirror/theme-one-dark": "^6.1.2",
     "@tinymce/tinymce-vue": "^5.0.0",
+    "@vue-office/docx": "^1.2.3",
+    "@vue-office/excel": "^1.2.7",
+    "@vue-office/pdf": "^1.2.6",
     "babel-polyfill": "^6.26.0",
     "codemirror": "^6.0.1",
     "core-js": "^3.32.0",
     "cron-parser": "^4.8.1",
-    "docx-preview": "^0.1.18",
     "exceljs": "^4.3.0",
     "file-saver": "^2.0.5",
     "jspdf": "^2.5.1",
@@ -30,6 +32,7 @@
     "tinymce": "^5.10.5",
     "view-ui-plus": "^1.3.14",
     "vue": "^3.3.4",
+    "vue-demi": "^0.13.11",
     "vue-masonry": "^0.16.0",
     "vue-ripple-directive": "^2.0.1",
     "vue-router": "^4.2.2",

package/packages/components/global-components/sh-preview/index.vue

@@ -1,15 +1,22 @@
 <template>
 	<div class="sh-preview">
-		<template v-if="previewObj.component">
-			<component :is="previewObj.component" :url="url" :width="width" :height="height" disabled />
-		</template>
-		<iframe v-else :src="(previewObj.base || '') + url + '#scrollbars=0&toolbar=0&statusbar=0'" :width="width" :height="height" frameborder="0"></iframe>
+		<component :is="componentName" v-bind="componentProps" :style="componentStyles" @rendered="onRendered" @error="onError" />
 	</div>
 </template>
 
 <script>
+import ShWord from '@vue-office/docx'
+import '@vue-office/docx/lib/index.css'
+import * as ShExcel from '@vue-office/excel'
+import '@vue-office/excel/lib/index.css'
+import * as ShPdf from '@vue-office/pdf'
 export default {
 	name: 'ShPreview',
+	components: {
+		ShWord,
+		ShExcel,
+		ShPdf
+	},
 	props: {
 		type: {
 			type: String
@@ -29,26 +36,42 @@ export default {
 			default: '600px'
 		}
 	},
-	data() {
-		return {
-			compTypeObj: [
-				{
-					types: ['word', 'doc', 'docx'],
-					component: 'ShWord'
-				},
-				{
-					types: ['excel', 'xlsx'],
-					component: 'ShSheet'
-				}
-			]
-		}
-	},
+	emits: ['ready', 'error'],
 	computed: {
 		previewType() {
 			return (this.type && this.type.toLowerCase()) || (this.url && this.url.substr(this.url.lastIndexOf('.') + 1).toLowerCase())
 		},
-		previewObj() {
-			return this.compTypeObj.find(item => item.types.includes(this.previewType)) || {}
+		componentName() {
+			if (['word', 'doc', 'docx'].includes(this.previewType)) {
+				return 'sh-word'
+			} else if (['excel', 'xlsx'].includes(this.previewType)) {
+				return 'sh-excel'
+			} else if (['pdf'].includes(this.previewType)) {
+				return 'sh-pdf'
+			}
+			return 'iframe'
+		},
+		componentProps() {
+			let srcPrefix = this.base || ''
+			let srcSuffix = this.componentName === 'iframe' ? '#scrollbars=0&toolbar=0&statusbar=0' : ''
+			return {
+				src: srcPrefix + this.url + srcSuffix,
+				frameborder: 0
+			}
+		},
+		componentStyles() {
+			return {
+				width: this.width,
+				height: this.height
+			}
+		}
+	},
+	methods: {
+		onRendered(data) {
+			this.$emit('ready', data)
+		},
+		onError(data) {
+			this.$emit('error', data)
 		}
 	}
 }

package/packages/components/index.js

@@ -13,7 +13,6 @@ import ShNoticeBar from './global-components/sh-noticebar/index.vue'
 import ShPreview from './global-components/sh-preview/index.vue'
 import ShPullRefresh from './global-components/sh-pull-refresh/index.vue'
 import ShResult from './global-components/sh-result/index.vue'
-import ShSheet from './global-components/sh-sheet/index.vue'
 import ShUpload from './global-components/sh-upload/index.vue'
 import ShForm from './global-components/sh-vxe-form/index.vue'
 import ShList from './global-components/sh-vxe-list/index.vue'
@@ -23,7 +22,6 @@ import ShTable from './global-components/sh-vxe-table/index.vue'
 import ShToolbar from './global-components/sh-vxe-toolbar/index.vue'
 import ShTree from './global-components/sh-vxe-tree/index.vue'
 import ShWaterFall from './global-components/sh-water-fall/index.vue'
-import ShWord from './global-components/sh-word/index.vue'
 
 const components = {
 	ShCard,
@@ -40,7 +38,6 @@ const components = {
 	ShPreview,
 	ShPullRefresh,
 	ShResult,
-	ShSheet,
 	ShUpload,
 	ShForm,
 	ShList,
@@ -49,8 +46,7 @@ const components = {
 	ShTable,
 	ShToolbar,
 	ShTree,
-	ShWaterFall,
-	ShWord
+	ShWaterFall
 }
 
 const index = {

package/packages/components/global-components/sh-sheet/index.vue

@@ -1,173 +0,0 @@
-<template>
-	<div :id="sheetId" ref="shSheet" class="sh-sheet" :style="sheetStyles"></div>
-</template>
-
-<script>
-export default {
-	name: 'ShSheet',
-	props: {
-		option: {
-			type: Object,
-			default() {
-				return {}
-			}
-		},
-		title: {
-			type: String,
-			default: ''
-		},
-		width: {
-			type: String,
-			default: '100%'
-		},
-		height: {
-			type: String,
-			default: '600'
-		},
-		disabled: {
-			type: Boolean
-		},
-		readonly: {
-			type: Boolean
-		},
-		url: {
-			type: String,
-			default: ''
-		}
-	},
-	data() {
-		return {}
-	},
-	computed: {
-		sheetId() {
-			return 'ShSheet' + this._.uid
-		},
-		sheetStyles() {
-			return {
-				width: this.width,
-				height: this.height
-			}
-		},
-		sheetOption() {
-			let { disabled, readonly, sheetId } = this
-			let isedit = !disabled && !readonly
-			let defaultOption = {
-				title: this.title,
-				lang: 'zh',
-				// plugins: ['chart'],
-				allowCopy: true, // 允许复制
-				showinfobar: isedit,
-				showtoolbar: isedit, // 工具栏
-				showtoolbarConfig: {}, // 自定义工具栏
-				showstatisticBar: true, // 底部计数栏
-				showstatisticBarConfig: {
-					count: true, // 计数栏
-					view: true, // 打印视图
-					zoom: true // 缩放
-				}, // 自定义计数栏
-				showsheetbar: true, // 底部sheet页
-				showsheetbarConfig: {
-					add: isedit, // 新增sheet
-					menu: true, // sheet管理菜单
-					sheet: true // sheet页显示
-				}, // 自定义底部sheet页
-				enableAddRow: isedit, // 允许添加行
-				enableAddBackTop: true, // 允许回到顶部
-				cellRightClickConfig: {
-					copy: false, // 复制
-					copyAs: false, // 复制为
-					paste: false, // 粘贴
-					insertRow: false, // 插入行
-					insertColumn: false, // 插入列
-					deleteRow: false, // 删除选中行
-					deleteColumn: false, // 删除选中列
-					deleteCell: false, // 删除单元格
-					hideRow: false, // 隐藏选中行和显示选中行
-					hideColumn: false, // 隐藏选中列和显示选中列
-					rowHeight: false, // 行高
-					columnWidth: false, // 列宽
-					clear: false, // 清除内容
-					matrix: false, // 矩阵操作选区
-					sort: false, // 排序选区
-					filter: false, // 筛选选区
-					chart: false, // 图表生成
-					image: false, // 插入图片
-					link: false, // 插入链接
-					data: false, // 数据验证
-					cellFormat: false // 设置单元格格式
-				}, // 自定义单元格右键菜单
-				sheetRightClickConfig: {
-					delete: false, // 删除
-					copy: false, // 复制
-					rename: false, // 重命名
-					color: false, // 更改颜色
-					hide: false, // 隐藏，取消隐藏
-					move: false // 向左移，向右移
-				}, // 自定义sheet页右击菜单
-				sheetFormulaBar: isedit, // 是否显示公式栏
-				defaultFontSize: 14, // 初始化默认字体大小
-				functionButton: false, // 功能按钮
-				data: [],
-				userInfo: ''
-			}
-			return Object.assign(defaultOption, this.option, { container: sheetId })
-		}
-	},
-	watch: {
-		sheetOption: {
-			handler() {
-				this.sheetRender()
-			},
-			deep: true
-		},
-		url: {
-			handler() {
-				this.sheetRender()
-			}
-		}
-	},
-	mounted() {
-		this.sheetRender()
-	},
-	methods: {
-		async sheetRender() {
-			const that = this
-			try {
-				window.luckysheet.destroy() // 先销毁当前容器
-				let sheetOption = that.sheetOption
-				if (that.url) {
-					let contentJson = await that.getFileContent()
-					sheetOption.data = contentJson.sheets
-					sheetOption.title = contentJson.info.name
-					sheetOption.userInfo = contentJson.info.creator
-				}
-				window.luckysheet.create(sheetOption)
-			} catch (e) {
-				that.msgerror(`初始化失败：${e.message}`)
-			}
-		},
-		// 获取文件流
-		async getFileContent() {
-			return new Promise(async (resolve, reject) => {
-				let fileRes = await this.$http.request({
-					methods: 'get',
-					url: this.url,
-					responseType: 'blob'
-				})
-				window.LuckyExcel.transformExcelToLucky(fileRes, (exportJson, luckysheetfile) => {
-					if (exportJson.sheets == null || exportJson.sheets.length === 0) {
-						reject(new Error('读取excel文件内容失败!'))
-					}
-					resolve(exportJson)
-				})
-			})
-		}
-	}
-}
-</script>
-
-<style lang="scss" scoped>
-.sh-sheet {
-	position: relative;
-}
-</style>

package/packages/components/global-components/sh-word/index.vue

@@ -1,106 +0,0 @@
-<template>
-	<div :ref="wordRef" class="sh-word"></div>
-</template>
-
-<script>
-import * as docx from 'docx-preview'
-export default {
-	name: 'ShWord',
-	props: {
-		option: {
-			type: Object,
-			default() {
-				return {}
-			}
-		},
-		title: {
-			type: String,
-			default: ''
-		},
-		width: {
-			type: String,
-			default: '100%'
-		},
-		height: {
-			type: String,
-			default: '600'
-		},
-		disabled: {
-			type: Boolean
-		},
-		readonly: {
-			type: Boolean
-		},
-		url: {
-			type: String,
-			default: ''
-		}
-	},
-	data() {
-		return {}
-	},
-	computed: {
-		wordRef() {
-			return 'shWord' + this._.uid
-		},
-		wordOption() {
-			let defaultOption = {
-				width: this.width,
-				height: this.height,
-				className: 'sh-word-wrap', //默认和文档样式类的类名/前缀
-				inWrapper: true, //启用围绕文档内容呈现包装器
-				ignoreWidth: true, //禁用页面的渲染宽度
-				ignoreHeight: false, //禁用页面的渲染高度
-				ignoreFonts: false, //禁用字体渲染
-				breakPages: true, //在分页符上启用分页
-				ignoreLastRenderedPageBreak: true, //在lastRenderedPageBreak元素上禁用分页
-				experimental: false, //启用实验功能（制表符停止计算）
-				trimXmlDeclaration: true, //如果为true，则在解析之前将从xml文档中删除xml声明
-				useBase64URL: false, //如果为true，图像、字体等将转换为base 64 URL，否则使用URL.createObjectURL
-				useMathMLPolyfill: false, //包括用于铬、边等的MathML多填充。
-				showChanges: false, //启用文档更改的实验渲染（插入/删除）
-				debug: false //启用额外的日志记录
-			}
-			return Object.assign(defaultOption, this.option)
-		}
-	},
-	watch: {
-		wordOption: {
-			handler() {
-				this.sheetRender()
-			},
-			deep: true
-		},
-		url: {
-			handler() {
-				this.sheetRender()
-			}
-		}
-	},
-	mounted() {
-		this.wordRender()
-	},
-	methods: {
-		async wordRender() {
-			if(!this.url) return
-			try {
-				let content = await this.getFileContent()
-				let res = await docx.renderAsync(content, this.$refs[this.wordRef], null, this.wordOption)
-				console.log(res)
-			} catch (e) {
-				this.msgerror(`初始化失败：${e.message}`)
-			}
-		},
-		// 获取文件流
-		async getFileContent() {
-			return this.$http.request({
-				methods: 'get',
-				url: this.url,
-				responseType: 'blob'
-			})
-		}
-	}
-}
-</script>
-
-<style lang="scss" scoped></style>