你要做一個預覽功能,如果直接使用插件,多個頁面使用會有很多隆余,在這里我把它組件化為html插件,直接使用即可,避免重復造輪子;
在vue中使用spreadjs插件,首先你要先下載這個插件,下載鏈接在后面;
大概的流程是首頁初始化js對象,然后再封裝調用;
1.需要下載插件有以下4個文件(而且把腳本放在這邊,頁面初始化的時候就可以加載):
2. 在頁面直接引用插件,初始化加載插件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= webpackConfig.name %></title> <!--引入spreadjs樣式--> <link rel="stylesheet" href="<%= BASE_URL %>spreadjs/css/gc.spread.sheets.excel2013white.13.0.0.css" title="spread-theme" /> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> <!--引入spreadjs腳本--> <script type="text/javascript" src="<%= BASE_URL %>spreadjs/js/gc.spread.sheets.all.13.0.0.min.js"></script> <script type="text/javascript" src="<%= BASE_URL %>spreadjs/js/gc.spread.excelio.13.0.0.min.js"></script> <script type="text/javascript" src="<%= BASE_URL %>spreadjs/js/gc.spread.sheets.resources.zh.13.0.0.min.js"></script> </body> </html>
3.寫一個excel.vue文件,放在視圖views哪個文件夾底下都行,文件內容如下
<template> <div class="app-container"> <div :id="spreadIdName" :style="spreadStyle"></div> </div> </template> <script> function noop() {} export default { name: "excel", data() { return { // spreadJs 內容 excelIo: {}, spread: {}, spreadNS: {}, spreadStyle: { width: '100%', height: '400px' }, spreadIdName: '', refName: 'excelView', bigFileJson: '' } }, props: { // 這個功能還沒有做 idName: { type: String, default: 'excelView' }, // 數據可以是文件 fileData: Object, // 數據可以是json序列化 workbookObj: Object, // 獲取文件字符串方法 getFileJsonString: { type: Function, default: noop } }, mounted() { this.spreadIdName = this.idName this.initIo() this.initSpreadJs() }, watch: { fileData(file) { if (file && Object.keys(file).length > 0) { this.initSpreadJsByFile(file) } else { this.clearSpreadJs() } }, workbookObj(obj) { if (obj && Object.keys(obj).length > 0) { this.initSpreadJsByJson(obj) } else { this.clearSpreadJs() } } }, methods: { // 初始化io流 initIo() { var that = this const { GC } = window GC.Spread.Common.CultureManager.culture('zh-cn') that.excelIo = new GC.Spread.Excel.IO() that.spreadNS = GC.Spread.Sheets; }, // 初始化插件 initSpreadJs: async function() { var that = this if (that.spread && Object.keys(that.spread).length > 0) { return } // 在彈窗中獲取id that.$nextTick(()=>{ that.spread = new that.spreadNS.Workbook(document.getElementById(that.spreadIdName)) }) }, // 清空插件內容 clearSpreadJs: async function() { var that = this if (that.spread && Object.keys(that.spread).length > 0) { that.spread.clearSheets() that.bigFileJson = '' that.getFileJsonString(that.bigFileJson) } }, // 關閉插件 closeSpreadJs: async function() { var that = this if (that.spread && Object.keys(that.spread).length > 0) { that.spread.clearSheets() that.bigFileJson = '' that.getFileJsonString(that.bigFileJson) } }, // 上傳EXCEL顯示 upExcel: async function(file) { var that = this var excelFile = file that.excelIo.open(excelFile, (json) => { var workbookObj = json that.upExcelJson(workbookObj) }, function (e) {
alert('文件讀取失敗，僅支持xlsx類型') }) }, upExcelJson: async function(workbookObj) { var that = this if (workbookObj) { that.spread.fromJSON(workbookObj) that.bigFileJson = JSON.stringify(workbookObj) that.getFileJsonString(that.bigFileJson) } else { that.spread.clearSheets() that.bigFileJson = '' that.getFileJsonString(that.bigFileJson) } }, initSpreadJsByJson: async function (workbookObj){ var that = this await that.initSpreadJs() await that.upExcelJson(workbookObj) }, initSpreadJsByFile: async function (file){ var that = this await that.initSpreadJs() await that.upExcel(file.raw) } } } </script> <style scoped> </style>
4.方法調用:
1).首先引入vue組件,在components 里面把excel當做html標簽使用
import excel from '@/views/hospital/preview/excel'
export default {
name: 'xxxxxx',
components: { pagination, excel }
}
2).調用
<div style="width: 100%;height: 400px;"> <excel :idName="spreadIdName" :fileData="bigUpFile" :workbookObj="bigWorkbookObj" :getFileJsonString="getBigFileJsonStr" /> </div>
// vue的data包含組件相關參數
data() {
return {
spreadIdName: 'excelView',
bigFileJson: '',
bigUpFile: {},
bigWorkbookObj: {}
}
},
// 上傳文件組件的回調函數就可以使用該組件,該組件會自動預覽文件,或者文件json
methods: {
getBigFileJsonStr(str) {
console.log(str)
this.bigFileJson = str
},
upLoadeChange: async function(file) {
var that = this
if (file) {
that.bigUpFile = file
} else {
that.bigWorkbookObj = {}
}
},
removeFile(file, fileList) {
var that = this
that.bigWorkbookObj = {}
}
}
5.預覽效果:
清空文件效果
6.end
我這邊只是做一個預覽功能,其他功能可以在這個基礎上按照需要自己在添加,我這里就不做過多介紹;
插件的下載鏈接
鏈接：https://pan.baidu.com/s/1h1tLa143uGWg-vJrCVg3rw
提取碼：pqlj
制作不易,您的打賞就是對我最大的支持,謝謝