前端文件预览，记录一下

最新推荐文章于 2024-06-12 19:10:45 发布

小小新9527

最新推荐文章于 2024-06-12 19:10:45 发布

阅读量307

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_50964329/article/details/126096520

版权

<!-- 预览图片 -->
    <el-image-viewer
      v-if="previewDialog"
      :url-list="previewUrl"
      :hide-on-click-modal="true"
      @close="previewClose"
    />

const previewDialog = ref(false);
const previewUrl = ref([]);


//查看预览文件
function previewFile(ossKey, ossUrl) {
  previewUrl.value = [];
  let url = ossUrl;
  let fileExtension = ossKey?.split('.')[ossKey?.split('.').length - 1];
  if (url) {
    if (
      //如果是以下格式就可以本地打开
      ['jpg', 'png', 'pdf', 'jpeg', 'gif'].includes(fileExtension)
    ) {
      if (['jpg', 'png', 'jpeg', 'gif'].includes(fileExtension)) {
        previewDialog.value = true;
        previewUrl.value.push(ossUrl);
      } else {
        window.open(url);
      }
    } else if (['doc', 'xlsx'].includes(fileExtension)) {
      //否则利用第三方打开
      window.open(
        `https://view.officeapps.live.com/op/view.aspx?src=${encodeURIComponent(ossUrl)}`,
      );
    }
  }
}