怎么用vue展示.docx文件、excel文件和csv文件内容

这篇文章主要介绍了怎么用Vue展示.docx文件、excel文件和csv文件内容的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么用vue展示.docx文件、excel文件和csv文件内容文章都会有所收获，下面我们一起来看看吧。

一、展示Word文件内容

1、安装并引入依赖mammoth

npm install --save mammoth

import mammoth from "mammoth"

2、页面中使用

<div  v-html="content"/>

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

二、展示excel/csv文件内容

1、安装并引入依赖handsontable、papaparse，excel文件需要安装xlxs

npm install handsontable @handsontable/vuenpm install papaparsenpm install xlsx

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

2、公共组件sheet.vue

<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>

3、页面内引入组件

import sheet from './sheet'

<sheet v-if="isCsv" :data="sheetData" />

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

// csv文件this.sheetData = []const rhis = thisPapa.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 = thisxhr2.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      }    })  })},

关于“怎么用vue展示.docx文件、excel文件和csv文件内容”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“怎么用vue展示.docx文件、excel文件和csv文件内容”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。