如何利用vue展示.docx文件、excel文件和csv文件内容

npm install --save mammoth

import mammoth from "mammoth"

//根据文件url，以arraybuffer的形式获取docx文件内容，传给插件转成html格式，展示在页面上 var xhr = new XMLHttpRequest() xhr.open('GET', fileurl, true) xhr.responseType = 'arraybuffer' const rhis = this xhr.onload = function(){ if(xhr.status === 200){ mammoth.convertToHtml({arrayBuffer: new Uint8Array(xhr.response)}).then(function(res){ rhis.$nextTick(()=>{ rhis.content = res.value }) }) } } xhr.send() 

npm install handsontable @handsontable/vue npm install papaparse npm install xlsx 

import Papa from 'papaparse' import xlsx from 'xlsx' 

import sheet from './sheet'

data() { return { sheetData: [], // sheet } }, 

// csv文件 this.sheetData = [] const rhis = this Papa.parse(fileurl, { download: true, complete: res => { const arrs = res.data const lastItem = arrs[arrs.length - 1].every(val => val === '') lastItem && arrs.pop() rhis.sheetData = arrs rhis.isCsv = true } }) 

// excel文件 var xhr2 = new XMLHttpRequest() xhr2.open('GET', fileurl, true) xhr2.responseType = 'blob' const rhis = this xhr2.onload = function() { var blob = this.response var reader = new FileReader() reader.onload = function(e) { const wb = xlsx.read(e.target.result, { type: 'binary' }) rhis.outputWorkbook(wb) // 处理数据 } reader.readAsBinaryString(blob) } xhr2.send() 

// 读取 excel 文件 outputWorkbook(workbook) { this.sheetData = [] var sheetNames = workbook.SheetNames // 工作表名称集合 sheetNames.forEach(name => { var worksheet = workbook.Sheets[name] // 只能通过工作表名称来获取指定工作表 var data = xlsx.utils.sheet_to_csv(worksheet) Papa.parse(data, { // 使用papaparse解析csv数据，并展示在表格中 complete: res => { const arrs = res.data // 去除最后的空行 const lastItem = arrs[arrs.length - 1].every(val => val === '') lastItem && arrs.pop() this.sheetData = arrs this.isCsv = true } }) }) },