vue 預覽 pptx,xlsx,pdf,docx

安裝插件 npm install ranui@0.1.9 --save

<r-preview :src="previewUrl"></r-preview>
import 'ranui';
export default{
data(){
  return {
    previewUrl:""
    }
},
  methods:{
    down(fileUrl){
          //fileUrl 預覽文件名稱,通過后綴判斷類型
                      if(fileUrl.toLowerCase().indexOf('.xlsx')>-1){
                            type = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
                        }else if(fileUrl.toLowerCase().indexOf('.docx')>-1){
                            type = "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
                        }else if(fileUrl.toLowerCase().indexOf('.pdf')>-1){
                            type = "application/pdf";
                            let blob = new Blob([res], {
                                type: 'application/pdf'
                            });
                            const url = window.URL.createObjectURL(blob);
                            window.open(url);
                            return ;
                        }else if(fileUrl.toLowerCase().indexOf('.pptx')>-1){
                            type = "application/vnd.openxmlformats-officedocument.presentationml.presentation";
                        }
                        if(type){
                            let blob = new Blob([res],{
                                type: type
                            });
                            this.previewUrl = window.URL.createObjectURL(blob);
                        }else{
                            this.$message.warning("預覽只支持docx,pptx,pdf,xlsx");
                        }
    }
  
  }}

效果圖pptx,效果有點差

image.png

效果圖docx

image.png

效果圖xlsx

image.png

效果圖pdf

image.png
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末窖式,一起剝皮案震驚了整個濱河市捆蜀,隨后出現(xiàn)的幾起案子徘禁,更是在濱河造成了極大的恐慌蹋砚,老刑警劉巖颖杏,帶你破解...
    沈念sama閱讀 216,591評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件潘飘,死亡現(xiàn)場離奇詭異拇涤,居然都是意外死亡,警方通過查閱死者的電腦和手機测柠,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評論 3 392
  • 文/潘曉璐 我一進店門炼鞠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來缘滥,“玉大人,你說我怎么就攤上這事簇搅⊥暧颍” “怎么了?”我有些...
    開封第一講書人閱讀 162,823評論 0 353
  • 文/不壞的土叔 我叫張陵瘩将,是天一觀的道長吟税。 經常有香客問我,道長姿现,這世上最難降的妖魔是什么肠仪? 我笑而不...
    開封第一講書人閱讀 58,204評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮备典,結果婚禮上异旧,老公的妹妹穿的比我還像新娘。我一直安慰自己提佣,他們只是感情好吮蛹,可當我...
    茶點故事閱讀 67,228評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著拌屏,像睡著了一般潮针。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上倚喂,一...
    開封第一講書人閱讀 51,190評論 1 299
  • 那天每篷,我揣著相機與錄音,去河邊找鬼端圈。 笑死焦读,一個胖子當著我的面吹牛,可吹牛的內容都是我干的舱权。 我是一名探鬼主播矗晃,決...
    沈念sama閱讀 40,078評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼宴倍!你這毒婦竟也來了?” 一聲冷哼從身側響起啊楚,我...
    開封第一講書人閱讀 38,923評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎郭变,沒想到半個月后颜价,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體涯保,經...
    沈念sama閱讀 45,334評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,550評論 2 333
  • 正文 我和宋清朗相戀三年周伦,在試婚紗的時候發(fā)現(xiàn)自己被綠了夕春。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,727評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡专挪,死狀恐怖及志,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情寨腔,我是刑警寧澤速侈,帶...
    沈念sama閱讀 35,428評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站倚搬,受9級特大地震影響乾蛤,放射性物質發(fā)生泄漏每界。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,022評論 3 326
  • 文/蒙蒙 一家卖、第九天 我趴在偏房一處隱蔽的房頂上張望眨层。 院中可真熱鬧,春花似錦篡九、人聲如沸伊佃。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,672評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽航揉。三九已至,卻和暖如春金刁,著一層夾襖步出監(jiān)牢的瞬間帅涂,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,826評論 1 269
  • 我被黑心中介騙來泰國打工尤蛮, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留媳友,地道東北人。 一個月前我還...
    沈念sama閱讀 47,734評論 2 368
  • 正文 我出身青樓产捞,卻偏偏與公主長得像醇锚,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,619評論 2 354

推薦閱讀更多精彩內容