Vue项目 word,excel,pdf文件预览

方法一：最简单方便的方法

window.open(https://view.officeapps.live.com/op/view.aspx?src=***） 是官网提供的方法

src 后面是你文档的地址 或者是你下载的地址

注意：

• 1 要有域名
• 2 要在公网能连接到
• 3 最好不要有什么访问权限 当然 带参数是可以 总结：文件必须是在外网服务器且可访问的。

方法二：根据不同文件类型进行相对处理

• 预览pdf文件

  • 方法一：通过后台返回链接直接用浏览器打开

  window.open(url)

  • 方法二 ：下载pdf插件

    • npm 下载 npm install --save vue-pdf

    • // 引入刚才下载的 pdf import pdf from 'vue-pdf'

    • 页面中使用

    <el-dialog title="预览" :visible.sync="viewVisible" width="100%" height="100%">
    <div v-show="fileType === 'pdf'">
      <pdf :src="pdfsrc" ></pdf>
    </div>
    </el-dialog>
    

• 预览excel文件(后端返回的excel文件流)

  • 方法:使用sheetjs

  $ npm install xlsx

  • 页面引用

    <template>
    <div>
      <el-button  size="small" type="primary"  @click="dealt(params)" >预览成绩</el-button>
  	  <el-dialog :visible.sync="DialogVisible" width="1200px">
    	    <div>
                 <i class="iconfont icon-print" v-print="'#printTest'"></i>
    	       <div class="table-html-wrap" id="printTest" v-html="tableHtml"></div>
    	    </div>
  	  </el-dialog>
     </div>
   </template>
  

  <script>
  import XLSX from 'xlsx'
  export default {
  	data () {
  		return {
    	tableHtml: '',
    		url: '',
    		DialogVisible: false
  }
  },
  methods: {
  // 获取后端返回的excel文件流
  dealt: function (params) { 
    const that = this
    const token = window.sessionStorage.getItem('token') //读取本地token
    var xhr = new XMLHttpRequest()
    const val = '?proId=' + params.programId + '&userId=' + params.userId //拼接请求参数，根据需求自定义
    xhr.open('get', that.url + val, true)
    xhr.setRequestHeader('user-token', token)
    xhr.responseType = 'arraybuffer'
    xhr.onload = function (e) {
      if (xhr.status === 200) {
        var data = new Uint8Array(xhr.response)
        var workbook = XLSX.read(data, {
          type: 'array'
        })
        that.tableToHtml(workbook)
      }
    }
    xhr.send()
  },
  //预览excel文件
  tableToHtml: function (workbook) {
    var worksheet = workbook.Sheets[workbook.SheetNames[0]]
    var innerHTML = XLSX.utils.sheet_to_html(worksheet)
    this.tableHtml = innerHTML
    this.DialogVisible = true
  }
  }
  }
  </script>
  

  <style lang="less" scoped>
  .table-html-wrap /deep/ table 
  {
  border-right: 1px solid  #e8eaec;
  border-bottom:1px solid  #e8eaec;
  border-collapse: collapse;
  margin: auto;
  }
  .table-html-wrap /deep/ table td {
  border-left: 1px solid  #e8eaec;
  border-top: 1px solid  #e8eaec;
  white-space: wrap;
  text-align: left;
  min-width: 100px;
  padding: 4px;
  }
  </style> 
  

  • 预览word文件

  等待