vue實現(xiàn)在線預覽pdf文件和下載（pdf.js）
更新時間：2019年11月26日 12:02:49 作者：安靜的天空
這篇文章主要為大家詳細介紹了vue實現(xiàn)在線預覽pdf文件和下載，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
最近做項目遇到在線預覽和下載pdf文件，試了多種pdf插件，例如jquery.media.js（ie無法直接瀏覽）
最后選擇了pdf.js插件（兼容ie10及以上、谷歌、安卓，蘋果）
強烈推薦改插件，以下介紹用法
（1）下載插件
下載路徑： pdf.js
（2）將下載構建后的插件放到文件中public（vue/cli 3.0）
（3）在vue文件中直接使用，貼上完整代碼
<template>
<div class="wrap">
<iframe :src="pSrc" width="100%" height="100%"></iframe>
</div>
</template>
<script>
export default {
name: "pdf",
data() {
return {
pSrc:'',
};
},
methods: {
loadPDF () {
//baseurl ：pdf存放的文件路徑，可以是本地的，也可以是遠程，這個是遠程的，親測可以用
let baseurl = 'http://image.cache.timepack.cn/nodejs.pdf';
//ie有緩存加個隨機數(shù)解決 + '?r=' + new Date()
let pSrc = baseurl + '?r=' + new Date();
this.pSrc = '../../plugin/pdf/web/viewer.html?file=' + encodeURIComponent(pSrc) + '.pdf';
},
},
mounted: function() {
this.loadPDF();
}
};
</script>
<style scoped>
.wrap{
position: fixed;
top: 0;
left: 0;
width: 100%;
bottom: 0;
}
</style>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
解決Vue響應式數(shù)據(jù)已獲取而視圖不更新的問題
這篇文章主要介紹了解決Vue響應式數(shù)據(jù)已獲取而視圖不更新的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue-seamless-scroll無縫滾動組件使用方法詳解
這篇文章主要為大家詳細介紹了vue-seamless-scroll無縫滾動組件的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue使用gitshot生成gif問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue項目在線上服務器訪問失敗原因分析，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家詳細介紹了vue3手動封裝彈出框組件message的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要為大家詳細介紹了VUE實現(xiàn)圖片驗證碼功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
keep-alive是Vue提供的一個抽象組件,用來對組件進行緩存,從而節(jié)省性能,下面這篇文章主要給大家介紹了關于vue?Keep-alive組件緩存的簡單使用,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue3中reactive和ref函數(shù)及對比,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2024-01-01
vue中el-select中多選回顯數(shù)據(jù)后沒法重新選擇和更改的解決
本文主要介紹了vue中el-select中多選回顯數(shù)據(jù)后沒法重新選擇和更改解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-01-01
這篇文章主要介紹了vue3中Fragment特性的一個bug，需要留意的注意事項示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2024-01-01