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

目录
  • 一、展示word文件内容
    • 1、安装并引入依赖mammoth
    • 2、页面中使用
  • 二、展示excel/csv文件内容
    • 1、安装并引入依赖handsontable、papaparse,excel文件需要安装xlxs
    • 2、公共组件sheet.vue
    • 3、页面内引入组件
  • 总结

    一、展示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){
      ifxhr.status === 200){
        mammoth.convertToHtml{arrayBuffer: new Uint8Arrayxhr.response)}).thenfunctionres){
    	  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: {
        datanewValue) {
          this.$refs.hot.hotInstance.loadDatanewValue)
        }
      },
      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.parsefileurl, {
      download: true,
      complete: res => {
        const arrs = res.data
        const lastItem = arrs[arrs.length - 1].everyval => 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 = functione) {
        const wb = xlsx.reade.target.result, {
          type: 'binary'
        })
        rhis.outputWorkbookwb) // 处理数据
      }
      reader.readAsBinaryStringblob)
    }
    xhr2.send)
    
    // 读取 excel 文件
    outputWorkbookworkbook) {
      this.sheetData = []
      var sheetNames = workbook.SheetNames // 工作表名称集合
      sheetNames.forEachname => {
        var worksheet = workbook.Sheets[name] // 只能通过工作表名称来获取指定工作表
        var data = xlsx.utils.sheet_to_csvworksheet)
    
        Papa.parsedata, { // 使用papaparse解析csv数据,并展示在表格中
          complete: res => {
            const arrs = res.data
            // 去除最后的空行
            const lastItem = arrs[arrs.length - 1].everyval => val === '')
            lastItem && arrs.pop)
            this.sheetData = arrs
            this.isCsv = true
          }
        })
      })
    },
    

    总结

    到此这篇关于如何利用vue展示.docx文件、excel文件和csv文件内容的文章就介绍到这了,更多相关vue展示docx、excel和csv文件内容内容请搜索风君子博客以前的文章或继续浏览下面的相关文章希望大家以后多多支持风君子博客!

    您可能感兴趣的文章:

    • Vue实现docx、pdf格式文件在线预览功能
    • Vue实现docx/xlsx/pdf等类型文件预览功能
    • Vue中如何实现在线预览word文件、excel文件
    • vue读取本地的excel文件并显示在网页上方法示例
    • 详解如何实现在Vue中导入Excel文件

    Published by

    风君子

    独自遨游何稽首 揭天掀地慰生平

    发表回复

    您的电子邮箱地址不会被公开。 必填项已用 * 标注