前端实现window.open实现pdf预览以及请求时携带请求头通过后端权限校验

项目场景：

需求是点击预览时 跳转的一个新的页面展示

问题描述

window.open携带不了token进行一个请求

原因分析：

window.open()方法直接根据文件路径进行跳转 根本没有走请求 自然携带不了token,知道原因以后就好解决了 我们可以先通过window.opne()方法 把我们需要的参数传递并打开一个新的页面

Window open() 方法 | 菜鸟教程

这是window.open 的使用方法 自行查看 如果你的需求只是打开可以不用跳转页面 直接把路径放在open方法里即可

本文仅介绍window.open方法携带请求头进行预览

本文前提是后端给你返回的是pdf文件流 如是普通文件流 那么此方法在最后把文件流转为url时 iframe不能识别

解决方案：

//根据路由跳转即可 须要在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>
//最后就完美解决了