使用iframe實現pdf文件預覽功能

更新時間：2023年09月07日 11:05:21 作者：前端不加班

這篇文章主要為大家詳細介紹了如何使用iframe實現pdf文件預覽功能,以及iframe預覽報錯問題和iframe未能加載PDF文檔,感興趣的小伙伴可以跟隨小編一起學習一下

一、iframe是什么

iframe的介紹：將src的內容規(guī)定在中顯示出。

iframe既可以用來預覽本地static下的文檔，也可以預覽后端返回的文件流文檔

二、使用步驟

1.使用與邏輯

邏輯：就是將后端返回的看不懂的文件流，設置成responseType = 'blob'然后讀取到返回的Blob，再使用createObjectURL讀取出url即可對于后綴名是大寫的.PDF 沒法直接預覽，建議直接下載下來看

 <iframe  :src="url" style="border: none;width: 100%;height: 100%;">
     <p>您的瀏覽器不支持 iframe 標簽,請從列表中下載預覽</p>
 </iframe>

  data () {
    return {
      url: '',
      }
  },
  methods: {
   downLoadFileImg (fileUrl, fileName) {// 后端文件地址和名稱
      // 可下載，名稱也有效 -- 推薦
      const x = new window.XMLHttpRequest()
      x.open('GET', fileUrl, true)
      x.responseType = 'blob' // 選擇返回格式為blob --- 一般后端返回的是看不懂的文件流 故需要轉成blob
      x.onload = () => {
        this.url = window.URL.createObjectURL(x.response) //將后端返回的blob文件讀取出url
		console.log('blob====',x.response)   //Blob {size: 38617, type: 'application/pdf'}
		console.log('url====',this.url)   //blob:http://localhost:7197/cb047277-e5e6-4905-bf8c-dbecd86a0105
		// url可以預覽和下載------如果想要下載就把下方注釋打開即可
        // const a = document.createElement('a')
        // a.href = this.url
        // a.download = fileName
        // a.click()
      }
      x.send()
      // // 或者下方的方式
      // axios({
      //   url: G_CGI_PHP.superOrder.upfile + "?id=" + this.rowData.id,
      //   method: 'get',
      //   timeout: 100000,
      //   responseType: 'blob',
      //   headers: {
      //     // "type": 'application/pdf'
      //   },
      // }).then(res => {
      //   console.log('res.data', res.data)
      //   this.url = window.URL.createObjectURL(res.data) //將后端返回的blob文件讀取出url
      //   console.log('通過讀取blob文件得到url地址===', this.url)
      // }).catch(error => {
      //   console.log(error)
      // })
    },
  }