需求：上傳pdf文件，并點(diǎn)擊可以打開預(yù)覽。使用input的file功能即可完成，預(yù)覽只需要跳轉(zhuǎn)到pdf的url地址即可。還可以配合vue-pdf直接預(yù)覽，點(diǎn)擊看這篇。

以下代碼可直接復(fù)制使用！！！有效的可以點(diǎn)贊收藏支持下！

<template><div class="content"><input type="file" class="box-orc-input" @change="uploadPdf($event)" /><span class="s2" 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(inputDOM.files[0])reader.onload = function (e) {_this.getPdfUrl(event.target.files[0])_this.pdfName = event.target.files[0].nameinputDOM.value = null //將input置空 否則上傳相同文件無反應(yīng) (不過置空后28行的打印 就看不到 event.target.files 文件數(shù)據(jù)（可以先注釋此行看下數(shù)據(jù)--就是pdf文件） )}},//通過讀取pdf得到urlgetPdfUrl (file) {let url = URL.createObjectURL(file) //將文件轉(zhuǎn)化成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>

總結(jié)

以上是生活随笔為你收集整理的pdf上传及预览；file上传pdf文件及预览；vue上传pdf文件及预览；vue-pdf预览pdf文件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。