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

这篇具有很好参考价值的文章主要介绍了前端实现window.open实现pdf预览以及请求时携带请求头通过后端权限校验。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

项目场景：

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

问题描述

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

原因分析：

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

Window open() 方法 | 菜鸟教程

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

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

本文前提是后端给你返回的是pdf文件流如是普通文件流那么此方法在最后把文件流转为url时 iframe不能识别文章来源地址https://www.toymoban.com/news/detail-554624.html

解决方案：

//根据路由跳转即可 须要在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>

//最后就完美解决了

到了这里，关于前端实现window.open实现pdf预览以及请求时携带请求头通过后端权限校验的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！