vue實(shí)現(xiàn)在線預(yù)覽pdf文件和下載（pdf.js）

更新時間：2019年11月26日 12:02:49 作者：安靜的天空

這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)在線預(yù)覽pdf文件和下載，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

最近做項(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)程，這個是遠(yuǎn)程的，親測可以用
    let baseurl = 'http://image.cache.timepack.cn/nodejs.pdf';
    //ie有緩存加個隨機(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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
pdf

相關(guān)文章

詳解Vue CLI 3.0腳手架如何mock數(shù)據(jù)
這篇文章主要介紹了詳解Vue CLI 3.0腳手架如何mock數(shù)據(jù)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
vue網(wǎng)站優(yōu)化實(shí)戰(zhàn)之秒開網(wǎng)頁
最近在搭建自己的博客,前端采用Vue技術(shù),發(fā)現(xiàn)首頁加載速度非常之慢,常常達(dá)到10S左右,遂開始優(yōu)化之旅,這篇文章主要給大家介紹了關(guān)于vue網(wǎng)站優(yōu)化實(shí)戰(zhàn)之秒開網(wǎng)頁的相關(guān)資料,需要的朋友可以參考下
2022-08-08
詳解element-ui中el-select的默認(rèn)選擇項(xiàng)問題
這篇文章主要介紹了詳解element-ui中el-select的默認(rèn)選擇項(xiàng)問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
vue實(shí)現(xiàn)圖片切換效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片切換效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06
vue同一瀏覽器登錄多賬號處理方案
項(xiàng)目在線上會遇到管理員類似權(quán)限比較大的用戶,會在同一瀏覽器登陸多個賬號,遇到這樣的問題如何處理呢,下面小編給大家介紹vue同一瀏覽器登錄多賬號處理方法,感興趣的朋友一起看看吧
2024-01-01
Vue $router.push打開新窗口的實(shí)現(xiàn)方法
在Vue中,$router.push方法默認(rèn)不支持在新窗口中打開頁面,但通過結(jié)合window.open方法和$router.resolve方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-09-09
Unocss(原子化css)?使用及vue3?+?vite?+?ts講解
這篇文章主要介紹了Unocss(原子化css)使用vue3?+?vite?+?ts的方法,簡單介紹了Unocss使用及圖標(biāo)庫使用，通過實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-11-11
vue 點(diǎn)擊其他區(qū)域關(guān)閉自定義div操作
這篇文章主要介紹了vue 點(diǎn)擊其他區(qū)域關(guān)閉自定義div操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue實(shí)現(xiàn)ToDoList簡單實(shí)例
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)ToDoList簡單實(shí)例，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-02-02
Vue函數(shù)式組件-你值得擁有
這篇文章主要介紹了Vue函數(shù)式組件及vue函數(shù)式組件的優(yōu)缺點(diǎn)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-05-05