The front-end implements window.open to implement pdf preview and carries the request header when requesting to pass the back-end permission verification.

Project scenario:

The requirement is to display a new page that jumps when you click on the preview.

---

Problem Description

window.open cannot carry token to make a request

---

Cause Analysis:

The window.open() method jumps directly according to the file path without making a request. Naturally, it cannot carry the token. Once you know the reason, it will be solved. We can first pass the parameters we need through the window.opne() method and open a new one. page

Window open() method | Newbie tutorial

This is how to use window.open. Check it yourself. If your requirement is just to open, you can put the path directly in the open method without jumping to the page.

This article only introduces the window.open method carrying request headers for preview

The premise of this article is that the backend returns you a pdf file stream. If it is an ordinary file stream, then this method will not recognize the iframe when the file stream is converted to a URL at the end.

---

solution:

//根据路由跳转即可 须要在router文件中定义一个静态路由 

let url=this.$router.resolve({

        path:'/view'

 })

//这个时候你需要把你需要请求接口的参数和须要的token 传递过去 

let token=res.filetype;

window['res']={id,token}

//跳转新页面

window.open(url.href, "_blank");

//接着在你打开的页面的create中拿到传递过来的数据

let recetive=window.opener['res']

//拿到数据以后就开始走接口 因为使用的是axios 所以请求自带token

async yl(){

//这个时候你拿到的数据应该是blob流的 无法直接识别 须要转成url地址

let res=await yl(this.id)

this.url=whndow.URL.createObjectURL(res)

}

//最后在template中使用一个标签

<iframe :src="url" style="border:none;width:100%;height:100%;"></iframe>

//最后就完美解决了