vue在线预览各类型文件

爱美丽007

已于 2023-05-23 11:23:10 修改

阅读量843

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2023-05-23 11:22:07 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_63456913/article/details/130823365

~得空写一下~

技术栈：vue2+elementUI

1.新建组件previewFile.vue

<template>
  <div :class="['dialog-box']">
    <el-dialog
      :title="`${file.title}文件预览`"
      :visible.sync="file.dialogVisible"
      :before-close="handleClose"
      width=""
      top="0"
    >
      <div>
        <iframe
          class="child"
          frameborder="0"
          :src="'http://view.xdocin.com/xdoc?_xdoc=' + file.fileurl"
          :style="{ height: height }"
        />
      </div>
    </el-dialog>
  </div>
</template>
  
  <script>
export default {
  props: {
    file: {
      type: Object,
      default: function () {
        return {
          fileurl: "",
          dialogVisible: false,
          title: "",
        };
      },
    },
  },
  data() {
    return {
      height: window.innerHeight - 120 + "px",
      dialogVisible: false,
    };
  },
  methods: {
    handleClose() {
      this.file.dialogVisible