プロジェクトのシナリオ:
要件は、プレビューをクリックするとジャンプする新しいページを表示することです。
問題の説明
window.open はリクエストを行うためのトークンを運ぶことができません
原因分析:
window.open() メソッドは、リクエストを行わずにファイル パスに従って直接ジャンプします。当然、トークンを運ぶことはできません。理由がわかれば解決します。まず、必要なパラメーターをウィンドウ経由で渡すことができます。 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> //最后就完美解决了