vue预览docx-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue预览docx。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

预览文件的数据流从服务器的接口传入：

1. 安装插件 yarn add xlsx

2.引入插件

import XLSX from "xlsx" // 早期版本的引入方式

import * as XLSX from 'xlsx/xlsx.mjs' // 为了适应新版本xlsx的引入方式

3. html中实现多sheet的切换，并将数据显示到div文章来源地址https://www.toymoban.com/news/detail-698064.html

<div class="tab">
                    <a-radio-group :value="sheetActive" button-style="solid" @change="changeSheet">
                      <a-radio-button v-for="(item,index) in sheetNames" :key="index" :value="item">{{item}}</a-radio-button>
                    </a-radio-group>
                </div>
                 <div v-html="activeTable" style="padding: 10px 15px"></div>

 api(option).then((res)=>{   
    ...     
                            this.initExcelPreview(res.data)
                        });

/**
     * 表格数据预览
     */
    initExcelPreview(blob) { // 接口返回blob
      try {
           const _this = this
           let fr = new FileReader();
           fr.readAsArrayBuffer(file);
           fr.addEventListener("loadend",(e) => {
                let buffer = e.target.result;
                const workbook = XLSX.read(buffer, {type: 'array'})
                const sheetNames = workbook.SheetNames // 工作表名称集合
                _this.workbook = workbook
                _this.sheetNames = sheetNames
                _this.sheetActive = sheetNames[0]
                _this.getTable(sheetNames[0])
            },false);
      } catch (e) {
       ...
      }
    },
    /**
     * 根据工作表名称获取数据
     * @param sheetName
     */
    changeSheetTable(e){
       let sheetName =e.target.value
       this.sheetActive =sheetName
       this.getTable(sheetName)
    },
    getTable(sheetName) {
      try {
        const worksheet = this.excel.workbook.Sheets[sheetName]
        let htmlData = XLSX.utils.sheet_to_html(worksheet, {header: '', footer: ''})
        this.activeTable = htmlData
      } catch (e) {
       ...
      }
    },

到了这里，关于vue预览docx的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！