vue查看pdf、bmp格式

一、查看 pdf、bmp

<el-tag
  v-for="(itemUrl,index) in scope.row.enclosure.split(',')"
  :key="index"
  @click="previewFile(itemUrl)"
  @close="handleClose(index)"
>
  <i class="el-icon-paperclip" />
  <span class="tagtext">{{ `附件${index+1}` }}</span>
</el-tag>


<!-- 预览图片弹窗 -->
<el-dialog :visible.sync="previewVisible">
  <img width="100%" :src="previewImageUrl" alt="">
</el-dialog>

previewImageUrl: '', // 文件链接
previewVisible: false, // 文件弹框

引入附件相关js

// 下载excel格式文件
export function downloadFile(data, fileName) {
  const blob = new Blob([data], { type: 'application/vnd.ms-excel' })
  const downloadElement = document.createElement('a')
  // downloadElement.style.display = 'none';
  const href = window.URL.createObjectURL(blob) // 创建下载的链接
  downloadElement.href = href
  downloadElement.setAttribute('download', `${fileName}.xlsx`)
  document.body.appendChild(downloadElement)
  downloadElement.click() // 点击下载
  document.body.removeChild(downloadElement) // 下载完成移除元素
  window.URL.revokeObjectURL(href) // 释放掉blob对象
}

// 下载pdf格式文件
export function downloadFilePDF(data, fileName) {
  const blob = new Blob([data], { type: 'application/pdf' })
  const downloadElement = document.createElement('a')
  const href = window.URL.createObjectURL(blob) // 创建下载的链接
  downloadElement.href = href
  downloadElement.setAttribute('download', `${fileName}.pdf`)
  document.body.appendChild(downloadElement)
  downloadElement.click() // 点击下载
  document.body.removeChild(downloadElement) // 下载完成移除元素
  window.URL.revokeObjectURL(href) // 释放掉blob对象
}

// 下载bmp格式文件
export function downloadFileBMP(data, fileName) {
  const blob = new Blob([data], { type: 'application/bmp' })
  const downloadElement = document.createElement('a')
  const href = window.URL.createObjectURL(blob) // 创建下载的链接
  downloadElement.href = href
  downloadElement.setAttribute('download', `${fileName}.bmp`)
  document.body.appendChild(downloadElement)
  downloadElement.click() // 点击下载
  document.body.removeChild(downloadElement) // 下载完成移除元素
  window.URL.revokeObjectURL(href) // 释放掉blob对象
}

import { downloadFileBMP, downloadFilePDF } from '@/utils/downloadFile'


// 预览文件
previewFile(file) {
  const suffix = file.split('.').pop()
  if (suffix === 'jpg' || suffix === 'png') {
    console.log('是jpg或png')
    this.previewImageUrl = file
    this.previewVisible = true
  } else if (suffix === 'pdf') {
    // 下载pdf文件
    console.log('是pdf')
    downLoad({ file: file }).then(res => {
      downloadFilePDF(res.data, '点位文件')
    }).catch(err => {
      this.$message.error(err.message || err.msg)
    })
  } else if (suffix === 'bmp') {
    // 下载bmp文件
    console.log('是bmp')
    downLoad({ file: file }).then(res => {
      downloadFileBMP(res.data, '点位文件')
    }).catch(err => {
      this.$message.error(err.message || err.msg)
    })
  }
},
// 自定义的文件移除事件
handleClose(i) {
  this.fileList.splice(i, 1)
},

二、上传

<el-form-item label="上传文件:" label-width="100px">
  <el-upload
    ref="upload"
    class="upload-demo"
    :action="imageUrl"
    :limit="fileLimit"
    :show-file-list="false"
    :on-success="handleSuccess"
    :on-remove="handleRemove"
    :on-exceed="handleExceed"
    :on-progress="handleProgress"
    :before-upload="beforeUpload"
  >
    <el-button class="btn">
      <i :class="fileLoading?'el-icon-loading':'el-icon-paperclip'" />
      {{ fileLoading?'正在上传...':'上传附件' }}
    </el-button>
    <span style="padding-left: 30px">上传文件类型支持格式：pdf, png, jpg, bmp</span>
  </el-upload>
  <div style="margin-top: 5px">
    <div v-for="(itemUrl,index) in fileList" :key="index">
      <el-tag
        style=" margin-bottom: 5px;flex-direction: row;display: flex;align-items: center; cursor: pointer;width: 440px"
        :disable-transitions="false"
        closable
        @click="previewFile(itemUrl)"
        @close="handleClose(index)"
      >
        <i class="el-icon-paperclip" />
        <span>{{ itemUrl }}</span>
      </el-tag>
    </div>
  </div>
</el-form-item>

imageUrl: process.env.VUE_APP_BASE_API + '/api/Oss/UploadFiles',
fileLimit: 5, // 文件个数

// 超出文件个数的回调
handleExceed() {
  this.$message({
    type: 'warning',
    message: '超出最大上传文件数量的限制！'
  }); return
},
// 上传文件的事件
handleSuccess(item) {
  // 上传文件的需要formdata类型;所以要转
  const formData = new FormData()
  formData.append('file', item.response)
  this.fileList.push(item.response.paths)// 成功过后手动将文件添加到展示列表里
  this.fileLoading = false
},
// 上传移除的事件
handleRemove(file) {
  const deleteFile = file.paths
  const index = this.fileList.findIndex(v => v.paths === deleteFile)
  if (index > -1) {
    this.fileList.splice(index, 1)
  }
},
// 上传文件中
handleProgress() {
  console.log('文件上传中...')
  this.fileLoading = true
},
// 上传文件之前
beforeUpload(file) {
  if (file.type != '' || file.type != null || file.type != undefined) {
    // 截取文件的后缀，判断文件类型
    const FileExt = file.name.replace(/.+\./, '').toLowerCase()
    // 计算文件的大小
    const isLt5M = file.size / 1024 / 1024 < 50 // 这里做文件大小限制
    // 如果大于50M
    if (!isLt5M) {
      this.$message.error('上传文件大小不能超过 50MB!')
      return false
    }
    // 如果文件类型不在允许上传的范围内
    if (this.fileType.includes(FileExt)) {
      return true
    } else {
      this.$message.error('上传文件格式不正确!')
      return false
    }
  }
},