【Vue】后端返回文件流,前端预览文件

 

let date;
        request({
          url: this.$route.query.url,
          method: 'get',
          responseType: 'blob',
        }).then(resp => {
          date = resp
          this.path = window.URL.createObjectURL(new Blob([resp], {type: "application/pdf"}))
        }).catch((e) => {
          //旧版本浏览器下的blob创建对象
          window.BlobBuilder = window.BlobBuilder ||
            window.WebKitBlobBuilder ||
            window.MozBlobBuilder ||
            window.MSBlobBuilder;
          if (e.name == 'TypeError' && window.BlobBuilder) {
            if (date) {
              BlobBuilder.append(date);
              this.path = URL.createObjectURL(new BlobBuilder().getBlob("application/pdf"))
            }
          } else {
            console.log("浏览器版本较低,暂不支持该文件类型预览");
          }
        }).finally(() => {
          window.URL.revokeObjectURL(this.path);
        })
responseType必须设置为blob
  <iframe style="width: 100%;height: 500px" :src="path"></iframe>

文件预览效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/328880.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

网站防御爬虫攻击有哪些方式

很多网站都深受爬虫困扰&#xff0c;网站在被爬虫大量抓取的的时候经常容易被爬虫把服务器资源抓崩了&#xff0c;有的时候&#xff0c;同行也会来爬取我们网站进行数据采集&#xff0c;影响我们站点的原创性&#xff0c;那么如何进行相对应的防护还是非常重要的&#xff01; …

Nacos 高级详解

一 、服务集群 1 需求 服务提供者搭建集群 服务调用者&#xff0c;依次显示集群中各服务的信息 2 搭建 1&#xff09;修改服务提供方的controller&#xff0c;打印服务端端口号 package com.czxy.controller;import org.springframework.web.bind.annotation.*;import …

2024 年 SEO 您需要了解的 8 个关键 SEO 趋势

SEO的未来正趋向于更加以用户为中心、合乎道德和技术先进的方法。 为什么&#xff1f; 人工智能 &#xff08;AI&#xff09; 和机器学习在搜索引擎中的兴起使他们能够更好地理解用户意图并提供更相关的结果Google 将经验、专业知识、权威性和可信度 &#xff08;E-E-A-T&…

C# wpf 获取控件刷新的时机

文章目录 前言一、为何要获取刷新时机&#xff1f;例子一、隐藏控件后截屏例子二、修改控件大小后做计算 二、如何实现&#xff1f;1.使用动画2.使用TaskCompletionSource 三、完整代码四、使用示例1、隐藏工具条截屏2、修改宽高后获取ActualWidth、ActualHeight 总结 前言 做…

export CUDA_HOME=/usr/local/cuda-11.8

echo $CUDA_HOM export CUDA_HOME/usr/local/cuda-11.8

MATLAB二维与三维绘图实验

本文MATLAB源码&#xff0c;下载后直接打开运行即可[点击跳转下载]-附实验报告https://download.csdn.net/download/Coin_Collecter/88740747 一、实验目的 掌握图形对象属性的基本操作。掌握利用图形对象进行绘图操作的方法。 二、实验内容 利用图形对象绘制曲线&#xff…

如何使用服务器?

文章目录 如何使用服务器&#xff1f;一、工具二、第一种方法三、第二种方法四、实例 个人经验 如何使用服务器&#xff1f; 本文详细介绍了如何利用服务器跑模型&#xff0c;具体流程如下&#xff1a; 一、工具 ToDeskPyCharm Professional移动硬盘JetBrains GatewayGit 二…

什么是用户态和内核态?用户态和内核态是如何切换的?

一、什么是用户态和内核态&#xff1f; 1.1、概述 用户态和内核态是操作系统的两种运行状态。 内核态&#xff1a;处于内核态的 CPU 可以访问任意的数据&#xff0c;包括外围设备&#xff0c;比如网卡、硬盘等&#xff0c;处于内核态的 CPU 可以从一个程序切换到另外一个程序…

【Rust学习】安装Rust环境

本笔记为了记录学习Rust过程&#xff0c;内容如有错误请大佬指教 使用IDE&#xff1a;vs code 参考教程&#xff1a;菜鸟教程链接: 菜鸟教程链接: Rust学习 Rust入门安装Rust编译环境Rust 编译工具 构建Rust 工程目录 Rust入门 安装Rust编译环境 因为我已经安装过VSCode了&am…

数据结构中的一棵树

一、树是什么&#xff1f; 有根有枝叶便是树&#xff01;根只有一个&#xff0c;枝叶可以有&#xff0c;也可以没有&#xff0c;可以有一个&#xff0c;也可以有很多。 就像这样&#xff1a; 嗯&#xff0c;应该是这样&#xff1a; 二、一些概念 1、高度 树有多高&#x…

正点原子imx6ull网络环境配置:开发板和电脑通过网线直连、电脑WiFi上网

1.硬件连接 开发板通过网线连接电脑。电脑连接wifi 2.VMware设置 2.1添加桥接模式和NAT模式 1&#xff09;打开vm设置 2&#xff09;设置网络适配器为桥接模式&#xff0c;不要勾选 “赋值物理网络连接状态” 3&#xff09; 添加一个网络适配器并设置成NAT模式&#xff0c;…

力扣hot100 颜色分类 双指针 滚动赋值

Problem: 75. 颜色分类 文章目录 思路解题方法复杂度Code&#x1f496; 超简洁版 思路 解题方法 描述你的解题方法 复杂度 时间复杂度: O ( n ) O(n) O(n) 空间复杂度: O ( 1 ) O(1) O(1) Code class Solution { public void sortColors(int[] nums){int n nums.length…

QGroundControl Qt安卓环境搭建及编译出现的问题

记录Qt 5.15.2搭建安卓环境出现的各种问题。 zipalign tool not found: D:/JavaAndroid/Android/sdk/build-tools//zipalign.exe&#xff1f; 答&#xff1a;需要将DANDROID_PLATFORM升级到已下载的版本. bin/llvm-readobj.exe: error: unknown argument ‘–libs’ 答&…

社交媒体数据分析:解读Facebook用户行为

在当今数字化时代&#xff0c;社交媒体已经成为人们生活不可或缺的一部分&#xff0c;而Facebook作为这个领域的巨头&#xff0c;承载了数十亿用户的社交活动。这庞大的用户群体产生了海量的数据&#xff0c;通过深度数据分析&#xff0c;我们能够深入解读用户行为&#xff0c;…

乐鑫科技业绩超预期修复,Wi-Fi芯片龙头走出“V底”了?

2024年伊始&#xff0c;又到了A股开始业绩披露的时间节点。 尽管A股业绩预告序幕刚刚拉开&#xff0c;但为数不多的企业预告似乎还是透露出某些信号&#xff1a;2023年国内半导体企业的业绩或许并没有想象中的“差”&#xff0c;相反正在逐渐改善。 通过同花顺问财进行筛选发…

php反序列化漏洞基础

一、序列化 serialize(): 序列化是将对象或类转换为字符串的过程,以便在程序运行过程中对其进行持久化存储或传输的操作。在PHP中,序列化主要用于将类对象或数组转换成字节流的形式,以便于存储在磁盘或传输到其他系统。 通过序列化,可以将对象或类转换成一串字符串,然后可…

PPO 跑CartPole-v1

gym-0.26.2 cartPole-v1 参考动手学强化学习书中的代码,并做了一些修改 代码 import gym import torch import torch.nn as nn import torch.nn.functional as F import numpy as np import matplotlib.pyplot as plt from tqdm import tqdmclass PolicyNet(nn.Module):def __…

2024最新PyQt5及其工具(Qt Designer、PyUIC、PyRcc)手把手操作实践指南

2024最新PyQt5及其工具&#xff08;Qt Designer、PyUIC、PyRcc&#xff09;手把手操作实践指南 前言 最近做了一些个人项目&#xff0c;内部逻辑还是挺多的&#xff0c;而且也有想要开源的想法&#xff0c;但是总不能直接把源码端给大家直接运行&#xff0c;有一些需求还有萌…

ubuntu设置每天定时关机

ubuntu设置每天定时关机 终端输入命令&#xff1a; sudo crontab -e输入密码&#xff0c;回车。 我这里使用nano作为编辑器&#xff0c;你可以选择vim。 在末尾输入以下命令&#xff1a; 59 23 * * * sudo -u root shutdown now设置&#xff1a;每天23:59分&#xff0c;电脑…

中科院自动化所:基于关系图深度强化学习的机器人多目标包围问题新算法

摘要&#xff1a;中科院自动化所蒲志强教授团队&#xff0c;提出一种基于关系图的深度强化学习方法&#xff0c;应用于多目标避碰包围(MECA)问题&#xff0c;使用NOKOV度量动作捕捉系统获取多机器人位置信息&#xff0c;验证了方法的有效性和适应性。研究成果在2022年ICRA大会发…