预览word，excel，ppt，pdf图片————使用vue实现

Posted 2022-08-08 咖啡壶子

预览word，excel，ppt，pdf、图片————使用vue实现

• • 需要下载的依赖:
  • template模板实现：
  • 方法的实现：

需要下载的依赖:

npm i xlsx 		// 预览excel插件
npm i mammoth	// 预览word插件
npm i vue-pdf 	// 预览pdf插件

template模板实现：

<template>
  <div>
    <input type="file" @change="handleClick($event)" />
    <el-dialog
      :before-close="closePreviewClick"
      :close-on-click-modal="false"
      :visible.sync="iframeState"
    >
      <div v-if="showExcel == true" style="width: 100%; height: 650px">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="450"
          size="mini"
        >
          <el-table-column
            :prop="item"
            :label="item"
            v-for="(item, index) in checkboxTableColumn"
            :key="'column' + index"
          >
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            v-if="excelData != 0"
            @size-change="handleSizeChange"
            @current-change="CurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40, 50, 100, 200, 500]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
      <div
        v-else-if="showDoc == true"
        style="
          margin-bottom: 20px;
          display: flex;
          justify-content: center;
          height: 850px;
          width: 100%;
          padding: 15px;
        "
      >
        <div
          v-loading="docVisible"
          element-loading-text="加载中"
          element-loading-spinner="el-icon-loading"
          v-html="vHtml"
        />
      </div>
      <div
        v-else-if="showPdf == true"
        style="
          margin-bottom: 20px;
          display: flex;
          justify-content: center;
          height: 850px;
          width: 100%;
          padding: 15px;
        "
      >
        <div style="position: fixed; top: 10px; z-index: 100">
          <el-button-group>
            <el-button
              type="primary"
              icon="el-icon-arrow-left"
              size="mini"
              @click="prePage"
              >上一页</el-button
            >
            <el-button type="primary" size="mini" @click="nextPage"
              >下一页<i class="el-icon-arrow-right el-icon--right"></i
            ></el-button>
          </el-button-group>
          <div style="margin-top: 10px; margin-left: 60px; color: #409eff">
             pageNum  /  pageTotalNum 
          </div>
        </div>
        <pdf
          style="width: 70%; margin: 0 auto; height: 850px"
          ref="pdf"
          :src="src"
          :page="pageNum"
          @num-pages="pageTotalNum = $event"
        >
        </pdf>
      </div>
      <div
        v-else-if="showImg == true"
        class="dialog-body-content-base-style"
        style="margin-bottom: 20px; display: flex; justify-content: center"
      >
        <img :src="imgUrl" />
      </div>
      <div
        v-else-if="showPPt == true"
        style="
          margin-bottom: 20px;
          display: flex;
          justify-content: center;
          width: 800px;
          height: 800px;
        "
      >
        <iframe
          :src="pptUrl"
          scrolling="no"
          frameborder="0"
          style="z-index: 1000; height: 100%; width: 100%"
        ></iframe>
      </div>
    </el-dialog>
  </div>
</template>

方法的实现：

（包括预览pdf，excel，ppt，word，图片的方法）

<script>
import pdf from "vue-pdf"; // 预览pdf插件
import mammoth from "mammoth"; // 预览word插件
import * as XLSX from "xlsx"; // 预览excel插件
export default 
  name: "",
  components: 
    pdf,
  ,
  props: ,
  data() 
    return 
      // start:控制那个标签显示的变量
      showPPt: false,
      showExcel: false,
      showPdf: false,
      showDoc: false,
      showImg: false,
      iframeState: false,
      // start:控制那个标签显示的变量
      src: "", // pdf的url地址
      // start:excel所需要的变量
      columnHeader: [], //所有键的值
      excelData: [], // 导入的excel的数据
      checkboxTableColumn: [], // 表格显示列
      tableData: [], //表格数据
      currentPage: 1, // 当前分页
      pageSize: 10, // 每页显示数量
      total: 0, // 数据总数
      // end:excel所需要的变量

      // start:pdf需要的变量
      vHtml: "", // doc文件变成html标签的变量
      docVisible: false, // 控制doc加载的变量
      pageNum: 1, // pdf的页码数量
      pageTotalNum: 1, // 总页数
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      // end:pdf需要的变量

      imgUrl: "", // 图片的url地址 （转化成了base64）
      pptUrl:"", // ppt的url地址 （转化成了base64）
    ;
  ,
  methods: 
    // 控制对话框展示与否的方法
    closePreviewClick() 
      if (this.showExcel === true) 
        this.showExcel = false;
        this.iframeState = false;
       else if (this.showPdf === true) 
        this.showPdf = false;
        this.iframeState = false;
       else if (this.showImg === true) 
        this.showImg = false;
        this.iframeState = false;
       else if (this.showDoc === true) 
        this.showDoc = false;
        this.iframeState = false;
       else if (this.showPPt === true) 
        this.showPPt = false;
        this.iframeState = false;
      
    ,
    // 根据文件类型处理不同的文件
    handleClick(e) 
      let file = e.target.files[0];
      let type = this.iconByType(e);
      if (type.indexOf("pdf") !== -1) 
        this.iframeState = true;
        this.showPdf = true;
        this.viewPdf(file);
       else if (type.indexOf("doc") !== -1 || type.indexOf("docx") !== -1) 
        this.iframeState = true;
        this.showDoc = true;
        this.viewDoc(file);
       else if (
        type.indexOf("xsl") !== -1 ||
        type.indexOf("xslx") !== -1 ||
        type.indexOf("xls") !== -1
      ) 
        this.iframeState = true;
        this.showExcel = true;
        this.exportData(e);
       else if (
        type.indexOf("jpg") !== -1 ||
        type.indexOf("png") !== -1 ||
        type.indexOf("jpeg") !== -1
      ) 
        this.showImg = true;
        this.iframeState = true;
        this.viewImg(file);
       else if (type.indexOf("pptx") !== -1 || type.indexOf("ppt") !== -1) 
        this.showPPt = true;
        this.viewPPt(file);
      
    ,
    // 判断文件类型的方法
    iconByType(e) 
      let filename = e.target.files[0].name;
      return filename.substring(filename.lastIndexOf(".") + 1, filename.length);
    ,
    // start:解析excel的方法
    exportData(event) 
      if (!event.currentTarget.files.length) 
        return;
      
      const that = this;
      let f = event.currentTarget.files[0];
      let reader = new FileReader();
      reader.onload = function (e) 
        var data = e.target.result;
        var wb = XLSX.read(data, 
          type: "buffer",
        );
        var outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
        console.log(outdata);
        that.excelData = outdata;
        that.tableData = outdata.slice(0, 10);
        that.total = outdata.length;
        var importDataThead = Array.from(Object.keys(outdata[0])).map(
          (item) => 
            return item;
          
        );
        that.columnHeader = importDataThead;
        that.checkboxTableColumn = importDataThead.slice(0, 9);
        console.log(importDataThead);
      ;
      reader.readAsArrayBuffer(f);
    ,
    // 分页切换
    CurrentChange(val) 
      this.currentPage = val;
      this.tableData = this.excelData.slice(
        (val - 1) * this.pageSize,
        val * this.pageSize - 1
      );
    ,
    // 每页显示数量改变
    handleSizeChange(val) 
      this.pageSize = val;
      this.tableData = this.excelData.slice(
        (this.currentPage - 1) * val,
        this.currentPage * val - 1
      );
    ,
    // end:解析excel的方法

    // 预览doc文件
    viewDoc(file) 
      const that = this;
      var reader = new FileReader();
      reader.readAsArrayBuffer(file);
      reader.onload = function () 
        const buffer = this.result; //此时是arraybuffer类型
        console.log(buffer);
        mammoth.convertToHtml( arrayBuffer: buffer ).then((result) => 
          that.vHtml = result.value;
        );
      ;
    ,
    // srart: 预览pdf文件
    // 预览pdf文件
    viewPdf(file) 
      var fileReader = new FileReader();
      let that = this;
      fileReader.onload = function () 
        that.src = this.result;
      ;
      fileReader.readAsDataURL(file);
    ,
    // 上一页
    prePage() 
      let page = this.pageNum;
      page = page > 1 ? page - 1 : this.pageTotalNum;
      this.pageNum = page;
    ,
    // 下一页
    nextPage() 
      let page = this.pageNum;
      page = page < this.pageTotalNum ? page + 1 : 1;
      this.pageNum = page;
    ,
    // end: 预览pdf文件

    // 预览图片
    viewImg(file) 
      let _this = this;
      let reader = new FileReader();
      reader.readAsDataURL(file); // 文件转换
      reader.onload = function () 
        _this.imgUrl = this.result;
      ;
    ,
    
    // 预览ppt
    viewPPt(file) 
      let _this = this;
      let reader = new FileReader();
      reader.readAsDataURL(file); // 文件转换
      reader.onload = function () 
        _this.pptUrl = this.result;
      ;
    ,
  ,
;
</script>
<style scoped>
.block 
  height: 40px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;

</style>

借鉴该篇文章（https://blog.csdn.net/weixin_44378416/article/details/119543832?spm=1001.2014.3001.5502）