element ui vue 附件预览组件、可预览图片、excel 、pdf.word等文件(浏览器打开文件的方式)

这篇具有很好参考价值的文章主要介绍了element ui vue 附件预览组件、可预览图片、excel 、pdf.word等文件(浏览器打开文件的方式)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1.组件源码

 2.html 代码

3.组件源码 


此组件就是一个单纯的预览图片、浏览器打开文件的形式简单的组合了下而成的,word、excel是直接下载、pdf浏览器打开的形式,如果想本地打开直接预览的话就直接不用看了。word、excel、pdf 的图片是我放到服务器上的图片地址。

1.组件演示

element ui vue 附件预览组件、可预览图片、excel 、pdf.word等文件(浏览器打开文件的方式)

 2.html 代码

<template>
 <div>
 
  <el-table
       
        :data="lists"
        max-height="620"
        border
        stripe
        style="width: 100%"
        :default-sort="{ prop: 'id', order: 'ascending' }"
      >
        <el-table-column
          label="工作部门"
          prop="workDept"
          width="300px"
          header-align="center"
          align="center"
        />
        <el-table-column
          label="报销人"
          prop="reimbursement"
          header-align="center"
          align="center"
        />
        <el-table-column
          label="报销日期"
          prop="reimbursementDate"
          header-align="center"
          align="center"
        />
       
        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          width="200"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              icon="el-icon-view"
              @click="showAnnex(scope.row)"
              >附件查看</el-button
            >
           
        </el-table-column>
      </el-table>
 
 
    <el-drawer
      title="费用报销附件信息"
      width="70%"
      :visible.sync="drawerAnnex"
      :direction="direction"
      :modal="true"
      @close="closePreview"
    >
      <file-preview :fileList="previewOptionData"></file-preview>
    </el-drawer>
  </div>
</template>

<script>

import FilePreview from "@/components/FilePreview";
export default {
  name: "Log",
  components: {
  
    FilePreview
  },
  data() {
    return {
      annexList: [],
	  drawerAnnex:false,
	  //list 自己的数据存进去就可以
	  lists:[],
    };
  },
  computed: {
   
    /**
     * 附件预览数据
     *
     */
    previewOptionData() {
      const cloneData = JSON.parse(JSON.stringify(this.annexList)); // 对源数据深度克隆
      return cloneData;
    }
  },
  created() {
  },
  methods: {
      showAnnex(row) {
      this.annexList = row;
      this.drawerAnnex = true;
    },
   
  }
};
</script>
<style>

</style>

3.组件源码 

<template>
  <div class="fileBox">
    <el-row>
      <el-col :span="24">
        <el-carousel
          indicator-position="outside"
          trigger="click"
          :autoplay="false"
        >
          <el-carousel-item v-for="(item, index) in annexList" :key="index">
            <template
              v-if="
                item.typeStr == 'pdf' ||
                  item.typeStr == 'doc' ||
                  item.typeStr == 'docx' ||
                  item.typeStr == 'xlsx' ||
                  item.typeStr == 'xls'
              "
            >
              <div style="    text-align: center;">
                <el-image
                  style=" height:200px;cursor: pointer;"
                  :src="fileUrl + item.filePic"
                  fit="fill"
                  @click="viewAnnex(item.fileUrl)"
                >
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
                <div style="cursor: pointer;" @click="viewAnnex(item.fileUrl)">
                  {{ item.fileName }}
                </div>
              </div>
            </template>
            <template v-else>
              <el-image
                style=" height: 80%;"
                trigger="click"
                :src="fileUrl + item.fileUrl"
                fit="fill"
                :preview-src-list="imgshoWList"
              >
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </el-image>
              <div style="cursor: pointer;color:red">
                {{ item.fileName }}
              </div>
            </template>
          </el-carousel-item>
        </el-carousel>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getSuffix } from "@/utils/index.js";
export default {
  name: "FilePreview",
  props: {
    fileList: {
      type: Object,
      default: ""
    }
  },
  data() {
    return {
      annexList: [],
      sourceUrl: "",
      imgshoWList: []
    };
  },
  watch: {
    fileList(val) {
      this.imgshoWList = this.value;
      this.showAnnex(val);
    }
  },
  computed: {
    imageUrl() {
      return this.value;
    }
  },
  mounted() {
   
    this.showAnnex(this.fileList);
  },
  methods: {
    showAnnex(row) {
      this.centerAnnex = [];
      this.annexList = [];
      this.annexObj = {};
      this.imgshoWList = [];
      var _this = this;
      /**
       * 返回字段名不同所以我这里需要处理下如果字段名一致则不需要
       */
      //费用报销
      if (row.expensesDetailList) {
        row.fileListSet = row.expensesDetailList;
      }
      //差旅费报销附件
      //travelDetailList
      if (row.travelDetailList) {
        row.fileListSet = row.travelDetailList;
      }
      console.log("行数据", row.fileListSet.length);
      for (let i = 0; i < row.fileListSet.length; i++) {
        this.centerAnnex = JSON.parse(row.fileListSet[i].url);
        console.log("转过来之后的数据", this.centerAnnex);
        for (let j = 0; j < this.centerAnnex.length; j++) {
          //判断文件后缀如果为pdf、word、excel以及其他文件时显示指定图片,
          //.jpg,.png,.txt,.doc,.docx,.pdf,.xlsx,.xls
          let suffix = getSuffix(this.centerAnnex[j].fileUrl);
          switch (suffix) {
            case "pdf":
              this.centerAnnex[j].filePic = "/files/pdf/pdf.jpg";
              break;
            case "xlsx":
              this.centerAnnex[j].filePic = "/files/xlsx/xlsx.jpg";
              break;
            case "xls":
              this.centerAnnex[j].filePic = "/files/xlsx/xlsx.jpg";
              break;
            case "docx":
              this.centerAnnex[j].filePic = "/files/word/word.jpg";
              break;
            case "doc":
              this.centerAnnex[j].filePic = "/files/word/word.jpg";
              break;
          }
          _this.annexList.push({
            filePic: this.centerAnnex[j].filePic,
            fileUrl: this.centerAnnex[j].fileUrl,
            fileName: this.centerAnnex[j].fileName,
            typeStr: suffix
          });
          if (
            suffix != "pdf" &&
            suffix != "doc" &&
            suffix != "docx" &&
            suffix != "xlsx" &&
            suffix != "xls"
          ) {
            _this.imgshoWList.push(this.fileUrl + this.centerAnnex[j].fileUrl);
          }
          if (_this.annexList.length > 0) {
            const url = _this.annexList[0].fileUrl;
            this.getiFremUrl(url, 0);
          }
        }
      }
      console.log("图片地址", _this.imgshoWList);
      this.drawerAnnex = true;
    },
    getiFremUrl(file, i) {
      this.currentIndex = i;
      const url = this.fileUrl + file;
      this.sourceUrl = url;
    },
    viewAnnex(item) {
      window.open(this.fileUrl + item);
    }
  }
};
</script>

<style lang="scss" scoped>

/deep/.el-image__inner,
.el-image__placeholder[data-v-1c1b3b50],
.el-image__error[data-v-1c1b3b50] {
  height: 200px !important;
  width: auto !important;
}
</style>

  2.  getSuffix "@/utils/index.js"js 中的源码(之前不好意思了,忘记贴这段了,多感谢小陈在线学代码童鞋的提醒)文章来源地址https://www.toymoban.com/news/detail-502196.html


 * 
 * 
 * @param {*} str 
 */

export function getSuffix(str) {
  if (str) {
    var h = str.substring(str.lastIndexOf('.') + 1)
    return h;
  }
}

到了这里,关于element ui vue 附件预览组件、可预览图片、excel 、pdf.word等文件(浏览器打开文件的方式)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • vue在线预览word、excel、PDF

    1、安装依赖 如果是vue2.6版本或以下还需要额外安装 @vue/composition-api 2、预览WORD代码 3、预览EXCEL 4、预览PDF 5、项目参考地址

    2024年02月09日
    浏览(66)
  • 基于vue element-ui 封装上传图片组件 功能:上传,删除,预览,上传图片水印,拖拽排序,上传进度条等

    我们在开发后台时肯定避免不了上传图片的功能 例如: 上传图片回显 上传完成 : 预览查看 , 删除等 如果是图片列表,还可能让你拖动图片排序 有的后台项目可能要给图片添加水印,添加标记 有的后台可能要炫酷一点 添加进度条功能 现在我们要完成上面的一系列功能,这里我

    2024年02月16日
    浏览(59)
  • 文档在线预览(四)将word、txt、ppt、excel、图片转成pdf来实现在线预览

    @ 目录 事前准备 1、需要的maven依赖 添加spire依赖(商用,有免费版,但是存在页数和字数限制,不采用spire方式可不添加) 2、后面用到的工具类代码: 一、word文件转pdf文件(支持doc、docx) 1、使用aspose方式 2、使用poi方式 3、使用spire方式 二、txt文件转pdf文件 三、PPT文件转

    2024年02月08日
    浏览(102)
  • vue3 el-upload 上传附件及预览 限制只能上传一个图片或者pdf格式的文件

    效果如图 直接看代码吧 template部分 css部分 js部分

    2024年02月11日
    浏览(86)
  • vue 使用vue-office预览word、excel,pdf同理

    在此,我只使用了docx和excel, pdf我直接使用的iframe进行的展示就不作赘述了 如果是vue2.6版本或以下还需要额外安装 @vue/composition-api 参考: 1、vue + vue-office 实现多种文件(docx、excel、pdf)的预览 2、vue 预览word、excel、pdf文档 vue-office(VueOfficeDocx、VueOfficeExcel、VueOfficePdf) 3、vu

    2024年02月07日
    浏览(57)
  • vue 实现 word/excel/ppt/pdf 等文件格式预览操作

    第三方服务接口地址:XDOC文档预览服务 特征: 有文件大小限制,超过要收费! 使用方法  参考地址:https://api.gitee.com/zhou_andong/vue-office/ 一、安装插件 vue-office 二、在引用时会涉及版本不兼容的问题 可以在npm包库 ,查看版本:https://www.npmjs.com/ 1、搜索插件名 2、以下版本没

    2024年02月16日
    浏览(85)
  • 【Vue实用功能】Vue实现文档在线预览功能,在线预览PDF、Word、Excel、ppt等office文件

    Luckysheet 是一个类似于 excel 的在线电子表格,功能强大、配置简单且完全开源。 安装 Luckysheet 1、通过CDN引入依赖 由于 Luckysheet 现在还没有发布出模块化的开发,不能使用 npm,所以我们需要在 VUE 项目中手动引入相关文件。编辑 public/index.html 文件,在里面添加如下代码 2、指

    2023年04月22日
    浏览(103)
  • element+vue 之预览pdf组件

    1.组件previewPdf 2.页面引用

    2024年02月16日
    浏览(50)
  • 前端(vue)js在线预览PDF、Word、Excel、ppt等office文件

    可选参数 pdf=true,word文档尝试以pdf方式显示,默认false watermark=水印文本,显示文本水印;“img:”+图片url表示图片水印,如:img:https://view.xdocin.com/demo/wm.png saveable=true,是否允许保存源文件,默认false printable=false,是否允许打印,默认true ©able=false,是否允许选择复制内容,

    2024年02月13日
    浏览(76)
  • element ui 上传图片以及pdf组件

    FileUpload.vue template   div     el-upload       :action=\\\"action\\\"       :file-list=\\\"fileList\\\"       list-type=\\\"picture-card\\\"       :limit=\\\"limit\\\"       :accept=\\\"accept\\\"       :class=\\\"hideUpload || uploading ? \\\'hideUpload\\\' : \\\'\\\'\\\"       :on-error=\\\"handleError\\\"       :before-upload=\\\"beforeUpload\\\"       :on-success=\\\"handleImageSucce

    2024年02月16日
    浏览(46)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包