pdf上传及预览；file上传pdf文件及预览；vue上传pdf文件及预览；vue-pdf预览pdf文件

需求：上传pdf文件，并点击可以打开预览。使用input的file功能即可完成，预览只需要跳转到pdf的url地址即可。
1.使用iframe直接预览
2.vue-pdf参考
3.vue-pdf报错解决

以下代码可直接复制使用！！！有效的可以点赞收藏支持下！

<template>
  <div class="content">
    <input type="file" class="box-orc-input" @change="uploadPdf($event)" />

    <span  v-if="pdfName" @click="gotoPdf(pdfUrl)">{{pdfName}} <span @click.stop.prevent="delPdf()">❌</span></span>
  </div>
</template>

<script>
function ie9 () {
  if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE6.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE7.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE8.0" || navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE9.0") {
    return true
  } else {
    return false
  }
}
export default {
  data () {
    return {
      pdfName: '',
      pdfUrl: '',
    }
  },

  methods: {
    // 上传pdf
    uploadPdf (event) {
      console.log(event)
      if (event.target.files[0].type != 'application/pdf') {
        return this.$message.warning('请选择上传pdf文件')
      }
      if (ie9()) {
        this.$message.warning('iE9及以下版本IE浏览器暂不支持该功能，请升级IE浏览器或者用其他浏览器操作。')
        retrun
      }
      //iE9及以下版本IE浏览器暂不支持该功能，请升级IE浏览器或者用其他浏览器操作。
      let inputDOM = event.target
      let _this = this
      var reader = new FileReader()
      reader.readAsDataURL(event.target.files[0])//读取文件
      reader.onload = function (e) {
        _this.getPdfUrl(event.target.files[0])//将得到的blob传出读取
        _this.pdfName = event.target.files[0].name
        inputDOM.value = null //将input置空 否则上传相同文件无反应 (不过置空后28行的打印 就看不到 event.target.files 文件数据（可以先注释此行看下数据--就是pdf文件）   )
      }
    },
    //通过读取pdf得到url
    getPdfUrl (file) {
      let url = URL.createObjectURL(file) //将blob文件转化成url
      this.pdfUrl = url  //赋值给url
      console.log(url)  // blob:http://localhost:8080/f2049a9d-31a6-4bd9-8a94-23dee457218f
      return url
    },
    // 打开pdf
    gotoPdf (pdfUrl) {
      // window.location.href = pdfUrl
      window.open(pdfUrl)
    },
    // 删除pdf
    delPdf () {
      this.pdfName = ''
      this.pdfUrl = ''
    }
  }
}
</script>

<style>
</style>