1.TXT预览
<template>
<div class="txt-prew-container">
<div class="txt-content" v-html="txt"></div>
</div>
</template>
<script>
export default {
name: 'TxtPrew',
data() {
return {
txtUrl: '',
txt: '',
}
},
created() {
this.txtPrew()
},
methods: {
txtPrew() {
let xhr = null
xhr = new XMLHttpRequest()
xhr.open('GET', this.txtUrl, false)
xhr.overrideMimeType('text/html;charset=utf-8')
xhr.send(null)
this.txt = xhr.responseText.split('\n').join('<br />')
}
}
}
</script>
2. excel预览
2.1 代码
<template>
<div class="excel-prew-container">
<el-table style="width: auto" border :data="tableData" id="tableData">
<template v-for="(item,index) in tableHead">
<el-table-column
:prop="item.column_name"
:label="item.column_comment"
:key="index"
></el-table-column>
</template>
</el-table>
</div>
</template>
<script>
import * as XLSX from 'xlsx'
export default {
name: 'ExcelPrew',
data() {
return {
tableHead: [],
tableData: [],
url: ''
}
},
created() {
this.readWorkbookFromRemoteFile()
},
methods: {
readWorkbookFromRemoteFile() {
var xhr = new XMLHttpRequest()
xhr.open('get', this.url, true)
xhr.responseType = 'arraybuffer'
const _this = this
xhr.onload = function(e) {
var binary = ''
if (xhr.status === 200) {
var bytes = new Uint8Array(xhr.response)
var length = bytes.byteLength
for (var i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i])
}
var wb = XLSX.read(binary, { type: 'binary' })
const result = []
wb.SheetNames.forEach(sheetName => {
result.push({
sheetName: sheetName,
sheet: XLSX.utils.sheet_to_json(wb.Sheets[sheetName])
})
})
if (result && result.length > 0) {
const data = {}
data.card = JSON.stringify(result[0].sheet)
_this.excelToTable(data) // 调用生成table方法
}
}
}
xhr.send()
},
excelToTable(data) {
const outData = JSON.parse(data.card)
const tableHeadList = []
let num = 1
for (const tableHead2 in outData[0]) {
const tableHead1 = {}
tableHead1['column_name'] = 'column_name' + num
tableHead1['column_comment'] = tableHead2
num = num + 1
tableHeadList.push(tableHead1)
}
this.tableHead = tableHeadList // 定制表头
const tableDataList = []
for (let j = 0; j < outData.length; j++) {
const tableData1 = {}
for (let k = 0; k < tableHeadList.length; k++) {
for (const outDataKey in outData[j]) {
if (tableHeadList[k]['column_comment'] === outDataKey) {
tableData1[tableHeadList[k]['column_name']] = outData[j][outDataKey]
}
}
}
tableDataList.push(tableData1)
}
this.tableData = tableDataList // 给表格内容赋值
}
}
}
</script>
不支持sheet切换和单元格合并
