vue 文件预览

 

<template>
  <div>
    <p>打开新页面预览文件</p>
    <div v-for="(item,index) in list" :key="index">
      <el-link type="primary" @click="handleOpen(item.url)">{{item.name}}</el-link>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [
        {
          name: '11111',
          url: 'https://img0.baidu.com/it/u=1857531512,4041326811&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=728'
        },
        {
          name: '22222',
          url: 'https://img2.baidu.com/it/u=2212878350,497638050&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500'
        },
        {
          name: '22222',
          url: 'https://img2.baidu.com/it/u=2212878350,497638050&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500'
        }
      ]
    }
  },
  methods: {
    // 预览
    handleOpen (url) {
      // 预览pdf
      if (url.includes('.pdf')) {
        window.open(url, '_blank')
      } else {
        var newWindow = window.open('', '_blank')
        // 构建图片预览的HTML
        var imagePreview = '<img src="' + url + '" alt="Image preview" />'
        // 向新窗口写入HTML内容
        if (newWindow) {
          newWindow.document.write(imagePreview)
        } else {
          alert('无法打开新窗口！')
        }
      }
    }
  }
}
</script>

<style>
</style>