vue預覽doc xls

No.1

install

npm install xlsx docx-preview --save

No.2

create a new component

<template>
  <div >
    <div v-if="previewData.type == 'doc'" ref="file"></div>
    <div v-if="previewData.type == 'xls'" v-html="tableau"></div>
  </div>
</template>
<script>

import axios from 'axios'
let docx = require('docx-preview');
const XLSX = require("xlsx")

export default {
  name: "index",
  props: {
    previewData: {
      default: {
        type: 'doc',
        url: ''
      }
    },
  },
  data() {
    return {
      tableau: '',
      pdfUrl: ''
    }
  },
  created() {
    if(this.previewData.url == '') {
      this.msgWarning('文件路徑為空')
    } else {
      switch (this.previewData.type) {
        case 'doc':
          axios({
            method: 'get',
            responseType: 'blob', // 設置響應文件格式
            url: this.previewData.url,
          }).then(({data}) => {
            docx.renderAsync(data,this.$refs.file) // 渲染到頁面預覽
          })
              break
        case 'xls':
          axios.get(this.previewData.url,{
            responseType: "arraybuffer", // 設置響應體類型為arraybuffer
          }).then(({data})=> {
            let workbook = XLSX.read(new Uint8Array(data), {type:"array"}); // 解析數(shù)據(jù)
            let worksheet = workbook.Sheets[workbook.SheetNames[0]]; // workbook.SheetNames 下存的是該文件每個工作表名字,這里取出第一個工作表
            this.tableau = XLSX.utils.sheet_to_html(worksheet); // 渲染
          })
      }
    }

  },
  methods: {

  }
}
</script>

<style scoped>

</style>

No.3

import and ues in you page

<Preview :previewData="previewData"></Preview>
import Preview from '@/components/Preview';
  components: {
    Preview
  },
  previewData: {
        type: 'doc',
        url: ''
      },
最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末涨享,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子仆百,更是在濱河造成了極大的恐慌厕隧,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,826評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件俄周,死亡現(xiàn)場離奇詭異吁讨,居然都是意外死亡,警方通過查閱死者的電腦和手機峦朗,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評論 3 395
  • 文/潘曉璐 我一進店門建丧,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人波势,你說我怎么就攤上這事翎朱。” “怎么了尺铣?”我有些...
    開封第一講書人閱讀 164,234評論 0 354
  • 文/不壞的土叔 我叫張陵拴曲,是天一觀的道長。 經(jīng)常有香客問我凛忿,道長澈灼,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,562評論 1 293
  • 正文 為了忘掉前任店溢,我火速辦了婚禮叁熔,結果婚禮上,老公的妹妹穿的比我還像新娘床牧。我一直安慰自己者疤,他們只是感情好,可當我...
    茶點故事閱讀 67,611評論 6 392
  • 文/花漫 我一把揭開白布叠赦。 她就那樣靜靜地躺著驹马,像睡著了一般革砸。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上糯累,一...
    開封第一講書人閱讀 51,482評論 1 302
  • 那天算利,我揣著相機與錄音,去河邊找鬼泳姐。 笑死效拭,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的胖秒。 我是一名探鬼主播缎患,決...
    沈念sama閱讀 40,271評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼阎肝!你這毒婦竟也來了挤渔?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,166評論 0 276
  • 序言:老撾萬榮一對情侶失蹤风题,失蹤者是張志新(化名)和其女友劉穎判导,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體沛硅,經(jīng)...
    沈念sama閱讀 45,608評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡眼刃,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,814評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了摇肌。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片擂红。...
    茶點故事閱讀 39,926評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖围小,靈堂內(nèi)的尸體忽然破棺而出篮条,到底是詐尸還是另有隱情,我是刑警寧澤吩抓,帶...
    沈念sama閱讀 35,644評論 5 346
  • 正文 年R本政府宣布涉茧,位于F島的核電站,受9級特大地震影響疹娶,放射性物質(zhì)發(fā)生泄漏伴栓。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,249評論 3 329
  • 文/蒙蒙 一雨饺、第九天 我趴在偏房一處隱蔽的房頂上張望钳垮。 院中可真熱鬧,春花似錦额港、人聲如沸饺窿。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,866評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽肚医。三九已至绢馍,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間肠套,已是汗流浹背舰涌。 一陣腳步聲響...
    開封第一講書人閱讀 32,991評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留你稚,地道東北人瓷耙。 一個月前我還...
    沈念sama閱讀 48,063評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像刁赖,于是被迫代替她去往敵國和親搁痛。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,871評論 2 354

推薦閱讀更多精彩內(nèi)容