Method one: the simplest and most convenient method

Window. The open * * * (https://view.officeapps.live.com/op/view.aspx?src=) is the way’s website

After SRC is the address of your document or the address where you downloaded it

Note:

  • 1 Have a domain name
  • 2 Connect to the public network
  • 3 had better not have what access rights of course with parameters is ok

Summary: Files must be on an extranet server and accessible.

Method 2: Perform relative processing according to different file types

  • Preview PDF files

    • Method 1: Open the browser directly through the link back in the background

    window.open(url)

    • Method 2: Download the PDF plug-in

      • NPM download

      npm install --save vue-pdf

      • // Import the PDF you just downloaded

      import pdf from 'vue-pdf'

      • Page use
      <el-dialog title=" preview ":visible. Sync ="viewVisible" width="100%" height="100%"> <div V-show ="fileType === 'PDF '"> < PDF :src="pdfsrc" ></pdf> </div> </el-dialog>Copy the code

  • Preview excel files (stream of Excel files returned from the back end)

    • Method: Use SheetJS

    $ npm install xlsx

    • Page reference

    <template> <div> <el-button size="small" type="primary" @click=" hand (params)" :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>Copy the code
    <script> import XLSX from 'xlsx' export default { data () { return { tableHtml: '', url: '', DialogVisible: False}}, methods: {// Get the excel file flow returned by the back end. Function (params) {const that = this const token = window. The sessionStorage. The getItem (' token ') / / read local token var XHR = new XMLHttpRequest() const val = '? ProId =' programId + programId + '&userId=' + params.userId ' Xhr. open('get', thate. 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()}, // Preview excel file 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>Copy the code
    <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> 
Copy the code

    • Preview word file

    Waiting for the