纯前端实现文件预览（pdf、docx 、xlsx）详细过程

前言

我详细这个当这个需求来的时候，有很大一部分人跟我的想法是一样的纯前端如何去实现多文件预览。确实这个功能很让人头疼，虽然市面上也有很多成型的插件，但是极少数能满足不同文件的预览，要么就是用第三方的链接去预览。这种虽然是最简单的方式。但是好多公司不会同意，涉及到以后后期是否有变动的问题。以及文件泄露的问题。那么下面我就给大家介绍一下我这边是如何处理这功能的。

实现效果图

html部分我这边是将docx和excel用弹框的形式去展示

<el-dialog
      :title="titles":visible.sync="dialogVisible"
      width="60%"class="filebox"
      @close="closeDialog"><div ref="childRef"class="childRef" v-if="wordShow"></div><div id="luckysheet" ref="luckysheet" style="height: 600px" v-if="excelShow"></div></el-dialog>

data中的参数定义

data(){return{fileUrl:"",dialogVisible:false,titles:"",excelShow:false,wordShow:false,}}

先来处理最简单的就是pdf的预览代码如下

//大多数都是采用iframe去做pdf的文件处理的PreviewFile(e){//点击预览事件的时候拿到当前对应的一个文件属性if(e.fileType =="pdf"){//判断文件类型const newWindow = window.open();
        newWindow.document.write('<iframe width="100%" height="100%" src="'+
            文件地址 +'" frameborder="0" allowfullscreen></iframe>');}}

其次就是word的文件预览稍微难一点代码如下

//word 需要装一个插件
npm i docx-preview -S// 然后引入 import{ renderAsync }from"docx-preview";

if(e.fileType =="docx"){//判断文件类型this.dialogVisible =true;this.excelShow =false;this.wordShow =true;this.titles = e.fileName +"文件预览";this.$nextTick(()=>{fetch(完整的文件地址).then((response)=>{let docData = response.blob();//将文件转换成bolb形式//选择要渲染的元素let childRef = document.getElementsByClassName("childRef");//用docx-preview渲染renderAsync(docData, childRef[0]).then((res)=>{});}).catch((error)=>{
              console.log(error);});});}

最后就是xlsx的文件预览个人认为最复杂一个

//xlsx也需要装一个插件
npm install luckyexcel

需要在utils下建一个excel.js文件

exportfunctionasynLoad(src, isCss =false){returnnewPromise(res=>{let el;if(isCss){
      el = document.createElement('link');
      el.rel ='stylesheet';
      el.href = src;}else{
      el = document.createElement('script');
      el.src = src;}
    document.documentElement.appendChild(el);
    el.onload = el.onreadystatechange=function(){if(!this.readyState ||this.readyState =='loaded'||this.readyState =='complete'){res(true);}this.onload =this.onreadystatechange =null;};});}

接下来就是我们的预览代码部分了

组件中引入

import LuckyExcel from"luckyexcel";import axios from"axios";import{ asynLoad }from"@/utils/excel";//这个不能掉引入上面写的excel.js

if(e.fileType =="xlsx"){this.dialogVisible =true;this.titles = e.fileName +"文件预览";this.excelShow =true;this.wordShow =false;const baseURL ="//cdn.jsdelivr.net/npm/luckysheet@latest/dist";
        Promise.all([asynLoad(`${baseURL}/plugins/css/pluginsCss.css`,true),asynLoad(`${baseURL}/plugins/plugins.css`,true),asynLoad(`${baseURL}/css/luckysheet.css`,true),asynLoad(`${baseURL}/assets/iconfont/iconfont.css`,true),asynLoad(`${baseURL}/plugins/js/plugin.js`),asynLoad(`${baseURL}/luckysheet.umd.js`),]).then(()=>{
             luckysheet = window.luckysheet;this.getOriginFile(e);// 获取远端文件需要拿到完整的文件地址}).catch((res)=>{
                console.log(res,"erro");});}//下面还有两个不可缺少的方法//url处理以及Blob的转换getOriginFile(e){axios({method:"get",responseType:"blob",//请求头，要自己写headers:{"access-control-allow-origin":"*"},//excel文件路径url: 文件地址,//方法传入的参数里面要包含url完整的文件地址}).then(({ data })=>{const blob =newBlob([data]);const file =newFile([blob],this.fileName);this.init(file);// 开始渲染}).catch((e)=>{}).finally(()=>{});},//加载xls文件init(file){
      luckysheet.destroy();// 先销毁当前容器
      LuckyExcel.transformExcelToLucky(file,(exportJson)=>{if(exportJson.sheets ===null||!exportJson.sheets.length){this.$message.error("无法读取excel文件的内容,当前不支持xls文件!");return;}
        luckysheet.create({container:"luckysheet",showinfobar:false,lang:"zh",data: exportJson.sheets,title: exportJson.info.name,userInfo: exportJson.info.name.creator,container:"luckysheet",// 设定DOM容器的idallowEdit:false,// 是否允许前台编辑});});},//弹窗关闭时候的销毁domcloseDialog(){this.excelShow =false;this.wordShow =false;},

关于excel的文件预览这边也有官方文档

https://mengshukeji.gitee.io/luckysheetdocs/zh/

以上就是给大家总结的三种格式的文件预览实现的方式如果有什么没写清楚的地方希望大家能够指出来，我也及时来改正。谢谢大家！