vue實(shí)現(xiàn)在線預(yù)覽pdf文件和下載（pdf.js）
更新時(shí)間：2019年11月26日 12:02:49 作者：安靜的天空
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)在線預(yù)覽pdf文件和下載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
最近做項(xiàng)目遇到在線預(yù)覽和下載pdf文件，試了多種pdf插件，例如jquery.media.js（ie無法直接瀏覽）
最后選擇了pdf.js插件（兼容ie10及以上、谷歌、安卓，蘋果）
強(qiáng)烈推薦改插件，以下介紹用法
（1）下載插件
下載路徑： pdf.js
（2）將下載構(gòu)建后的插件放到文件中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存放的文件路徑，可以是本地的，也可以是遠(yuǎn)程，這個(gè)是遠(yuǎn)程的，親測(cè)可以用
let baseurl = 'http://image.cache.timepack.cn/nodejs.pdf';
//ie有緩存加個(gè)隨機(jī)數(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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)選項(xiàng)卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue-input框checkbox強(qiáng)制刷新問題
這篇文章主要介紹了Vue-input框checkbox強(qiáng)制刷新問題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
詳解vue項(xiàng)目中如何引入全局sass/less變量、function、mixin
這篇文章主要介紹了詳解vue項(xiàng)目中如何引入全局sass/less變量、function、mixin，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
vue+tsc+noEmit導(dǎo)致打包報(bào)TS類型錯(cuò)誤問題及解決方法
當(dāng)我們新建vue3項(xiàng)目,package.json文件會(huì)自動(dòng)給我添加一些配置選項(xiàng),這寫選項(xiàng)基本沒有問題,但是在實(shí)際操作過程中,當(dāng)項(xiàng)目越來越復(fù)雜就會(huì)出現(xiàn)問題,本文給大家分享vue+tsc+noEmit導(dǎo)致打包報(bào)TS類型錯(cuò)誤問題及解決方法,感興趣的朋友一起看看吧2023-10-10
在vue項(xiàng)目中和后臺(tái)交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫,它是基于promise的http庫,可運(yùn)行在瀏覽器端和node.js中,下面這篇文章主要給大家介紹了關(guān)于Vue中Axios的封裝與接口管理的相關(guān)資料,需要的朋友可以參考下2022-03-03
今天小編就為大家分享一篇Vue 中對(duì)圖片地址進(jìn)行拼接的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue-cli webpack2項(xiàng)目打包優(yōu)化分享
下面小編就為大家分享一篇vue-cli webpack2項(xiàng)目打包優(yōu)化，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了vue組件傳值的11種方式總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue3動(dòng)態(tài)路由+菜單欄的實(shí)現(xiàn)示例
在后臺(tái)管理系統(tǒng)，可以根據(jù)登錄用戶的不同返回不同路由，頁面也會(huì)根據(jù)這些路由生成對(duì)應(yīng)的菜單，本文主要介紹了vue3動(dòng)態(tài)路由+菜單欄的實(shí)現(xiàn)示例，感興趣的可以了解一下2024-04-04
這篇文章主要為大家詳細(xì)介紹了Vue自定義圖片懶加載指令v-lazyload，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04