vue预览pdf、docx、xlsx文件

目录

前言

一、pdf文件预览

二、word文件预览

三、Excel文件预览​​​​​​​

---

前言

 保姆级教程，不简单你kansi我

---

一、pdf文件预览

主要讲oss编码特殊情况下进行文件预览，或者使用pdf.js也可以进行预览

上代码

this.$axios.get("文件路径").then(res=>{
    var blob = new Blob([res]);
    var blobUrl = URL.createObjectURL(blob);
    this.iframeUrl=blobUrl//iframe可直接使用进行文件预览
})

<template>
    <iframe :url="iframeUrl"></iframe>
</template>

二、word文件预览

插件：docx-preview

注：docx-preview和mammoth不支持doc文件的预览。

npm i docx-preview

<template>
  <div class="banner">
    <div ref="file"></div>
  </div>
</template>

let docx = require("docx-preview");
export default{
    data(){
        return {}
    },
    mounted(){
        this.$axios({
            method: 'get',
            responseType: 'blob',
            url: 'docx文件路径',
        }).then(({data}) => {
            docx.renderAsync(data,this.$refs.file)
        })
    }
}

三、Excel文件预览

插件：luckysheet

npm install gulp -g

注：

1. luckysheet不支持xls文件预览。
2. npm引入后如果报luckysheet is not not defined请更换cdn引入。
3. 有人遇到end of data .correction zip这个报错应该是文件格式引入错误，请复查代码确保文件正常引入。

<template>
  <div class="banner">
    <div id="mysheet" style="width:500px;height:500px;"></div>
  </div>
</template>

import LuckyExcel from 'luckyexcel' 

export default{
    data(){
        return {}
    },
    mounted(){
        LuckyExcel.transformExcelToLuckyByUrl("xlsx文件路径", "", (exportJson, luckysheetfile) => {
            if(exportJson.sheets==null || exportJson.sheets.length==0){
                console.log("文件预览失败!");
                return;
            }
            // luckysheet.destroy();卸载表格
            // 重新创建新表格
            luckysheet.create({
                container: 'mysheet', // 设定DOM容器的id
                showinfobar: false, // 是否显示顶部信息栏
                showstatisticBar: false, // 是否显示底部计数栏
                allowEdit: false, // 是否允许前台编辑
                enableAddRow: false, // 是否允许增加行
                enableAddCol: false, // 是否允许增加列
                sheetFormulaBar: false, // 是否显示公式栏
                enableAddBackTop: false,//返回头部按钮
                data:exportJson.sheets, //表格内容
                showtoolbar: false, // 是否显示工具栏
                title:exportJson.info.name  //表格标题
            });
        });
    }
}

 报错lucksheet is not defined请更换cdn方式在public/index.html内引入，报错原因不是很清楚。

 

<link rel='stylesheet' href='./plugins/css/pluginsCss.css' />
<link rel='stylesheet' href='./plugins/plugins.css' />
<link rel='stylesheet' href='./css/luckysheet.css' />
<link rel='stylesheet' href='./assets/iconfont/iconfont.css' />
<script src="./plugins/js/plugin.js"></script>
<script src="./luckysheet.umd.js"></script>