iframe を使用して PDF をプレビューする

この記事では主に、iframe を使用して PDF をプレビューする機能、および iframe プレビューエラーレポートと PDF ドキュメントの読み込みに失敗した iframe について紹介します。
プレビューには、ページネーション、ダウンロード、回転、拡大縮小などの機能が付属しています。
ここに画像の説明を挿入
1. iframe とは何ですか?
iframe の概要: src の内容を iframe に表示します。
iframe を使用すると、ローカル静的なドキュメントをプレビューしたり、バックエンドから返されたファイルストリームドキュメントをプレビューしたりすることができ
ます
。

逻辑：就是将后端返回的看不懂的文件流，设置成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)
      // })


    },

  }

2. グラフィックとテキストの詳細な説明:
ここに画像の説明を挿入

3. エラー状況:

理由: createObjectURL で読み取ったものは、responseType: 'blob' の設定後に取得された BLOB ではないことを意味します。バックエンドによって返された理解できないファイルストリームの可能性があります。直接読む

iframe を使用して PDF をプレビューする

おすすめ