Vue

js

// pdf 预览
export function download(id) {
return request({
url: '/bbs/regtech/law/download?id='+id,
method: 'get',
responseType: "blob",
})
}

弹框方式打开/也可设置成在新页面打开

      <el-dialog
:title="title"
:visible.sync="viewVisible"
width="100%"
height="100%"
center
>
<template>
<iframe
class="prism-player"
:src="pdfUrl"
width="100%"
height="800px"
></iframe>
</template>
</el-dialog>
import { download } from "@/api/assistance";
export default {
data() {
return {
pdfUrl: "",
title: "",
viewVisible: false,
};
},
methods: {
gopdf() {
var id = "1515969321506050048";
download(id).then((res) => {
const binaryData = [];
binaryData.push(res.data);
let url = window.URL.createObjectURL(
new Blob(binaryData, { type: "application/pdf" })
);
this.pdfUrl = url; // this.viewVisible = true; 当前页弹框打开
// 新页面打开
window.open(url);
});
},
},
};

Java 文件流输出

    @Override
public void download(HttpServletResponse response, String id) {
LawFile lawFile = this.getById(id);
String uploadPath = lawFile.getUploadPath();
String fileName = lawFile.getTitle();
try {
// 创建输出流对象
ServletOutputStream outputStream = response.getOutputStream();
//以字节数组的形式读取文件
byte[] bytes = FileUtil.readBytes(uploadPath);
// 设置返回内容格式
response.setContentType("application/octet-stream");
fileName = new String(fileName.getBytes("UTF-8"), "ISO8859-1");
// 设置下载弹窗的文件名和格式(文件名要包括名字和文件格式)
response.setHeader("Content-Disposition", "attachment;filename=" + fileName);
// 返回数据到输出流对象中
outputStream.write(bytes);
// 关闭流对象
IoUtil.close(outputStream);
} catch (Exception ignored) {
log.error(ignored.getMessage());
}
}

Vue 文件流预览 PDF的更多相关文章

  1. 网页中动态嵌入PDF文件/在线预览PDF内容https://www.cnblogs.com/xgyy/p/6119459.html

    #网页中动态嵌入PDF文件/在线预览PDF内容# 摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如 ...

  2. vue文件流转换成pdf预览(pdf.js+iframe)

    参考文档:https://www.jianshu.com/p/242525315bf6 PDFJS: https://mozilla.github.io/pdf.js/     支持获取文件流到客户端 ...

  3. vue移动端预览 pdf 文件

    pdf预览,在项目中是很常见的需求,在PC端web项目中,我们可以使用window.open(url)直接打开pdf进行预览,那么移动端虽然我们也可以使用此方法,但是这是新开了一个webview页面, ...

  4. #网页中动态嵌入PDF文件/在线预览PDF内容#

    摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如下: 代码片段1: 1 <object ty ...

  5. fis3+vue+pdf.js制作预览PDF文件或其他

    人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...

  6. vue、Element 点击按钮以弹窗形式预览pdf文件

    直接上代码吧 <div > <el-button type="success" size="small" @click="isVie ...

  7. 文档控件NTKO OFFICE 详细使用说明之预览PDF文件(禁止打印、下载、另存为、防抓包下载)

    1.在线预览PDF文件(禁止打印.下载.复制.另存为) (1) 运行环境 ① 浏览器:支持IE7-IE11(平台版本还支持Chrome和Firefox) ② IE工具栏-Internet 选项:将ww ...

  8. html页面预览pdf文件使用插件pdfh5.js

    html预览pdf文件需要依赖pdf.js 移动端适配需要pdfh5.js 记录移动端适配pdfh5.js的用发 在线预览: https://www.gjtool.cn/pdfh5/pdf.html? ...

  9. ASP.NET MVC 项目直接预览PDF文件

    背景及需求 项目使用的是MVC4框架,其中有一个功能是根据设置生成PDF文件,并在点击时直接预览. 实现过程 1.第一版实现代码: HTML内容 @{ Layout = null; } <!DO ...

  10. 使用PDF.JS实现pdf文件在线预览时,报文件被损坏的错误

    首先大概说明一下问题出现的背景:我用PDF.JS实现文件在线预览,参考网上的办法,在jsp文件中使用 <iframe src="<c:url value="js/gen ...

随机推荐

  1. APK包的加固手段收集(浅)

    目录 防止APK被调试 加壳 代码混淆: 检测调试器: 使用反调试技术: 环境检测: 使用Native代码: 多层防护: 防止APK被篡改 签名校验: V1 签名机制 V2 签名机制 V3 签名机制 ...

  2. 奇怪的回溯增加了 | leetcode131分割回文串

    题目要求:给你一个字符串 s,请你将s分割成一些子串,使每个子串都是回文串.返回 s 所有可能的分割方案 示例 1: 输入:s = "aab" 输出:[["a" ...

  3. 【MySQL】 批量更改库,表,字段的字符集

    库一级的更改: -- 单个库字符集更改 ALTER DATABASE `ymcd_aisw` CHARACTER SET 'utf8' COLLATE 'utf8_general_ci'; ALTER ...

  4. python多进程multiprocessing模块的变量传递问题:父进程中的numpy.array对象隐式序列化到子进程后的inplace操作的问题

    参考: https://docs.python.org/zh-cn/3/library/multiprocessing.html cloudpickle -- Python分布式序列化的专用模块   ...

  5. vue项目之主页布局

    1.背景 2.基本结构 代码: <template> <el-container class="home-container"> <!-- 头部--& ...

  6. 花样玩转“所见即所得”的可视化开发UI

    随着技术的发展,用户对软件的界面美观度和交互体验的要求越来越高.在这样的背景下,可视化开发UI(User Interface)成为了提升用户体验和开发效率的重要工具. 通过图形界面来设计和构建用户界面 ...

  7. 新兴互联网银行搭档Apache SeaTunnel构建数据流通管道!

    当新兴互联网银行乘着数字化改革的风潮搭档数据集成平台Apache SeaTunnel,成千万上亿的数据就有了快速流通的管道.6月26日14:00,Apache SeaTunnel社区将带上企业最佳实践 ...

  8. Git/Github的基本操作

    由于我之前已经安装好了Git,然后这里就不再叙述之前的相关创建账户的步骤了.直接记录一下如何在本地创建一个项目,并上传到github上面. 1.打开github官网,点击New Repository, ...

  9. 牛客周赛 Round 6

    牛客周赛 Round 6 A-游游的数字圈_牛客周赛 Round 6 (nowcoder.com) 枚举即可 #include <bits/stdc++.h> #define int lo ...

  10. 微服务全链路跟踪:springcloud集成jaeger

    微服务全链路跟踪:grpc集成zipkin 微服务全链路跟踪:grpc集成jaeger 微服务全链路跟踪:springcloud集成jaeger 微服务全链路跟踪:jaeger集成istio,并兼容u ...