做公司网站别人能看到吗6,上海中学有哪些,网页制作详细设计,南昌网站建设方案需求#xff1a;上传pdf文件#xff0c;并点击可以打开预览。使用input的file功能即可完成#xff0c;预览只需要跳转到pdf的url地址即可。 1.使用iframe直接预览 2.vue-pdf参考 3.vue-pdf报错解决 以下代码可直接复制使用#xff01;#xff01;#xff01;有效的可以点… 需求上传pdf文件并点击可以打开预览。使用input的file功能即可完成预览只需要跳转到pdf的url地址即可。 1.使用iframe直接预览 2.vue-pdf参考 3.vue-pdf报错解决 以下代码可直接复制使用有效的可以点赞收藏支持下
templatediv classcontentinput typefile classbox-orc-input changeuploadPdf($event) /span v-ifpdfName clickgotoPdf(pdfUrl){{pdfName}} span click.stop.preventdelPdf()❌/span/span/div
/templatescript
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 }}
}
/scriptstyle
/style
