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 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/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、页面内引入组件文章来源地址https://www.toymoban.com/news/detail-427659.html

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展示.docx文件、excel文件和csv文件内容的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • python 读写 json,csv,txt,docx,xlsx,xls文件大全

    最近再处理数据的时候,总会用到读写json,csv,xlsx和xls文件代码 这里就做个总结记录一下 扩展: json.loads(line)和 json.load(line) 通用写法: 1.2.1 list类型写入 1.2.2 dict类型写入 注意:json.dump()将Python对象序列化为JSON格式,并将其写入文件中。 扩展:json.dumps()和 json.dump() 2.2.1

    2024年02月06日
    浏览(46)
  • vue 预览 有token验证的 doc、docx、pdf、xlsx、csv、图片 并下载

    预览 doc我也不会 下载

    2024年02月09日
    浏览(46)
  • 028:vue上传解析excel文件,列表中输出内容

    第028个 查看专栏目录: VUE ------ element UI 在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。 (1)提供vue2的一些基本操作:安装、引用,模板使用,computed,watch,生命周期(beforeCreate,created,beforeMount,mounted, beforeUpdate,upda

    2024年02月09日
    浏览(44)
  • 如何使用Vue实现Excel表格数据的导入,在前端实现Excel表格文件的上传和解析,并使用Table组件将解析出来的数据展示在前端页面上

    随着互联网的发展和社会的进步,各个行业的数据量越来越大,对于数据的处理变得越来越重要。其中,Excel表格是一种重要的数据处理工具。在前后端项目中,实现Excel表格的导入和导出功能也愈加常见。这篇文章将介绍如何使用Vue实现Excel表格数据的导入。 在开始介绍实现

    2024年02月11日
    浏览(66)
  • Go如何自动解压缩包?如何读取docx/doc文件内容?

    在开发过程中,我们常常需要处理压缩包和文档文件。本文将介绍如何使用Go语言自动解压缩包和读取docx/doc文件。 压缩包格式 常见的压缩包格式有zip、gzip、bzip2等。在Go语言中,使用archive/zip、compress/gzip、compress/bzip2包可以轻松地处理这些格式的文件。 解压zip文件 使用arc

    2023年04月08日
    浏览(40)
  • python读取pdf、doc、docx、ppt、pptx文件内容

    使用python读取文件,其中pdf、docx、pptx可以直接读,.ppt和.doc文件不能直接读,需要转换成.pptx和.docx文件,并且需要区分系统 如果是linux系统,请先安装组件 python代码如下:

    2024年02月11日
    浏览(51)
  • 批量将excel文件转csv文件

    要将Excel文件批量转换为CSV文件,并按照汇总,可以使用Python中的`pandas`库来实现。下面是示例代码: import pandas as pd import os def excel_to_csv(file_path, output_folder):     # 读取Excel文件     df = pd.read_excel(file_path)     # 获取文件名(不带扩展名)作为输出CSV文件的名称    

    2024年02月11日
    浏览(43)
  • excel文件保存成CSV

    Sub CsvOutput()     Dim strNow As String     Dim csvFile As String     Dim lastRow As String     Dim targetRange As Range     Dim wb As Workbook     Dim fso As Object               strNow = Format(Now, \\\"yyyymmddhhnnss\\\")     csvFile = Application.GetSaveAsFilename(InitialFileName:=\\\"XXXXXXCSV_\\\" strNow \\\".csv\\\", FileFilter:=\\\"CSV文件(*.csv)

    2024年02月13日
    浏览(38)
  • 后端接口返回文件流,前端实现docx/pdf/excel等类型文件的导出功能

    最近遇到一个需求,在后端返回文件流后前端需要实现导出docx类型的文件。在网上查看了一些资料总结了两种比较常用的方法。 1、封装接口 注意:接口需要添加 responseType: “blob”,否则会出现文件下载后无法打开或者损坏的情况。 2、转换数据格式 导出word文件,需要在创

    2024年01月21日
    浏览(48)
  • 通过Java读取csv文件内容

    1、通过 FileReader(String fileName) 读取整个文件,并通过 BufferedReader(Reader in) 作为每行的缓冲; 2、在通过 readLine() 读取每行内容,通过空格作为分隔符,每行转为数组,并存在 ListString[] 列表中; 3、最后打印 csv文件中的内容。 csv 文件内容如下: 打印的代码如下: 输出的内容

    2024年02月15日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包