需求：上传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: {// 上传pdfuploadPdf (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.targetlet _this = thisvar 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].nameinputDOM.value = null //将input置空 否则上传相同文件无反应 (不过置空后28行的打印 就看不到 event.target.files 文件数据（可以先注释此行看下数据--就是pdf文件）   )}},//通过读取pdf得到urlgetPdfUrl (file) {let url = URL.createObjectURL(file) //将blob文件转化成urlthis.pdfUrl = url  //赋值给urlconsole.log(url)  // blob:http://localhost:8080/f2049a9d-31a6-4bd9-8a94-23dee457218freturn url},// 打开pdfgotoPdf (pdfUrl) {// window.location.href = pdfUrlwindow.open(pdfUrl)},// 删除pdfdelPdf () {this.pdfName = ''this.pdfUrl = ''}}
}
</script><style>
</style>