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

这篇文章主要介绍了Vue中如何实现展示.docx文件、excel文件和csv文件,具有很好的参考价值,希望对大家有所帮助。

一、展示word文件内容

1、安装并引入依赖mammoth

npm install --save mammoth
import mammoth from "mammoth"

2、页面中使用

<div style="height:850px;overflow-y:auto;" v-html="content"/>
//根据文件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 Unit8Array(xhr.response)}).then(function(res){
	  rhis.$nextTick(()=>{
	    rhis.content = res.value
	  })
    })
  }
}
xhr.send()

二、展示excel/csv文件内容

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

npm install handsontable @handsontable/vue
npm install papaparse
npm 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 = 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
      }
    })
  })
},
vue项目网站全局置灰功能实现示例详解 网站建设

vue项目网站全局置灰功能实现示例详解

这篇文章主要为大家介绍了vue项目网站全局置灰功能实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助! 1、前端独立实现 两种不同的逻辑,一种是前端自己实现,一种是结合后台管理系统...
Vue使用Echarts画柱状图详解 网站建设

Vue使用Echarts画柱状图详解

本篇来学习下柱状图的实现 柱状图实现步骤 ECharts 最基本的代码结构准备x轴的数据准备 y 轴的数据准备 option , 将 series 中的 type 的值设置为: bar <...
vue项目如何修改title旁边的icon图片 网站建设

vue项目如何修改title旁边的icon图片

这篇文章主要介绍了vue项目如何修改title旁边的icon图片,具有很好的参考价值,希望对大家有所帮助。 vue修改title旁边的icon图片 找到 public 文件夹下,修改 index....