附件上传excel新窗口简单预览

1.下载插件xlsx     npm i xlsx

2.引入插件 import * as XLSX from "xlsx"

3.使用upload的change钩子函数获取文件file.raw

<el-upload 
    size="small" 
    ref="upload" 
    class="upload-demo" 
    action="/app/resources/upload/file"
	multiple :on-success="onSuccess" 
    :show-file-list="false" 
    :on-change="handleFileUpload"/>

 

<script>
import * as XLSX from "xlsx"
export default {
	
	data () {
		return {
			previewData: {
				headers: [],
				rows: []
			}
           }
        }
    methods:{
        handleFileUpload (file) {
			const reader = new FileReader()
			reader.onload = (e) => {
				const data = e.target.result
				const workbook = XLSX.read(data, { type: 'binary' })
				const sheetName = workbook.SheetNames[0]
				const sheet = workbook.Sheets[sheetName]
				const json = XLSX.utils.sheet_to_json(sheet, { header: 1 })
				this.previewData.headers = json[0]
				this.previewData.rows = json.slice(1)
			}
			reader.readAsBinaryString(file.raw)
		},

        //查看附件
		openPreview () {
			var encodedObject = encodeURIComponent(JSON.stringify(this.previewData));
			window.open(`/file-preview?data=` + encodedObject, '_blank');
		},
        }
    }
</script>

4.使用window的方法打开新的网页跳转传参（数据小点可以，大点的话会报错）