您好,登錄后才能下訂單哦!
這篇文章主要介紹了怎么用vue展示.docx文件、excel文件和csv文件內(nèi)容的相關(guān)知識,內(nèi)容詳細(xì)易懂,操作簡單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇怎么用vue展示.docx文件、excel文件和csv文件內(nèi)容文章都會有所收獲,下面我們一起來看看吧。
npm install --save mammoth
import mammoth from "mammoth"
<div v-html="content"/>
//根據(jù)文件url,以arraybuffer的形式獲取docx文件內(nèi)容,傳給插件轉(zhuǎn)成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'
<template> <div class="overf"> <div id="table" class="sheet"> <hot-table ref="hot" :data="data" :settings="hotSettings" /> </div> </div> </template> <script> import { HotTable } from '@handsontable/vue' // import Handsontable from 'handsontable' import 'handsontable/dist/handsontable.full.css' export default { components: { HotTable }, props: { data: { type: Array, default() { return [] } } }, data() { return { hot: null, hotSettings: { readOnly: true // manualColumnResize: true, // manualRowResize: true, // minSpareRows: 0 } } }, watch: { data(newValue) { this.$refs.hot.hotInstance.loadData(newValue) } }, created() { }, methods: {} } </script> <style lang="scss" scoped> .overf{ height: 300px; overflow: hidden; } .sheet{ height: 100%;overflow: auto; &>>>#hot-display-license-info{ display:none; } } </style>
import sheet from './sheet'
<sheet v-if="isCsv" :data="sheetData" />
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) // 處理數(shù)據(jù) } 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數(shù)據(jù),并展示在表格中 complete: res => { const arrs = res.data // 去除最后的空行 const lastItem = arrs[arrs.length - 1].every(val => val === '') lastItem && arrs.pop() this.sheetData = arrs this.isCsv = true } }) }) },
關(guān)于“怎么用vue展示.docx文件、excel文件和csv文件內(nèi)容”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對“怎么用vue展示.docx文件、excel文件和csv文件內(nèi)容”知識都有一定的了解,大家如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。