Vue 文件流预览 PDF
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的更多相关文章
- 网页中动态嵌入PDF文件/在线预览PDF内容https://www.cnblogs.com/xgyy/p/6119459.html
#网页中动态嵌入PDF文件/在线预览PDF内容# 摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如 ...
- vue文件流转换成pdf预览(pdf.js+iframe)
参考文档:https://www.jianshu.com/p/242525315bf6 PDFJS: https://mozilla.github.io/pdf.js/ 支持获取文件流到客户端 ...
- vue移动端预览 pdf 文件
pdf预览,在项目中是很常见的需求,在PC端web项目中,我们可以使用window.open(url)直接打开pdf进行预览,那么移动端虽然我们也可以使用此方法,但是这是新开了一个webview页面, ...
- #网页中动态嵌入PDF文件/在线预览PDF内容#
摘要:在web开发时我们有时会需要在线预览PDF内容,在线嵌入pdf文件: 问题1:如何网页中嵌入PDF: 在网页中: 常用的几种PDF预览代码片段如下: 代码片段1: 1 <object ty ...
- fis3+vue+pdf.js制作预览PDF文件或其他
人生第一篇博客,的确有点紧张,但有些许兴奋,因为这对于我来说应该是一个好的开始,以此励志在技术的道路上越走越远. 看过了多多少少的技术博客,给自己带来了很多技术上的收获,也因此在想什么时候自己也可以赠 ...
- vue、Element 点击按钮以弹窗形式预览pdf文件
直接上代码吧 <div > <el-button type="success" size="small" @click="isVie ...
- 文档控件NTKO OFFICE 详细使用说明之预览PDF文件(禁止打印、下载、另存为、防抓包下载)
1.在线预览PDF文件(禁止打印.下载.复制.另存为) (1) 运行环境 ① 浏览器:支持IE7-IE11(平台版本还支持Chrome和Firefox) ② IE工具栏-Internet 选项:将ww ...
- html页面预览pdf文件使用插件pdfh5.js
html预览pdf文件需要依赖pdf.js 移动端适配需要pdfh5.js 记录移动端适配pdfh5.js的用发 在线预览: https://www.gjtool.cn/pdfh5/pdf.html? ...
- ASP.NET MVC 项目直接预览PDF文件
背景及需求 项目使用的是MVC4框架,其中有一个功能是根据设置生成PDF文件,并在点击时直接预览. 实现过程 1.第一版实现代码: HTML内容 @{ Layout = null; } <!DO ...
- 使用PDF.JS实现pdf文件在线预览时,报文件被损坏的错误
首先大概说明一下问题出现的背景:我用PDF.JS实现文件在线预览,参考网上的办法,在jsp文件中使用 <iframe src="<c:url value="js/gen ...
随机推荐
- pytest + allure2.x 踩坑-报告无数据
我按照网上的教程,在用pytest生成完allure可以使用的json数据之后,然后再用allure生成报告,打开,发现我生成的报告中没有数据显示. 1.首先我用pytest生成数据是没有问题的 2. ...
- centos7 最小化安装yum不能安装软件解决方案
慕课网神思者老师课常资料带的布署工具中,自带的liunx 系统centos7 yum发现不能安装软件,比如docker 解决方案 首先我们安装好虚拟机启动系统centos7 尝试安装任何软件都会报 ...
- APK包的加固手段收集(浅)
目录 防止APK被调试 加壳 代码混淆: 检测调试器: 使用反调试技术: 环境检测: 使用Native代码: 多层防护: 防止APK被篡改 签名校验: V1 签名机制 V2 签名机制 V3 签名机制 ...
- top的wa,mpstat的%iowait以及pidstat的%wait
top的wa,mpstat的%iowait以及pidstat的%wait pidstat 中, %wait 表示进程等待 CPU 的时间百分比.等待 CPU 的进程已经在 CPU 的就绪队列中,处于运 ...
- python对象之间的交互
python对象之间的交互 先看看一般的类定义如下: class 类名: def __init__(self,参数1,参数2): self.对象的属性1 = 参数1 self.对象的属性2 = 参数2 ...
- python global将结果存储起来给另外一个文件对象使用
python global将结果存储起来给另外一个文件对象使用 使用场景: 在aaa.py文件里面操作数据生成结果C 然后再在bbb.py文件里面使用C 下面是aaa.py代码: #!/usr/bin ...
- 【Web】 通过浏览器打开本地应用程序
首先需要编写注册表: 以Steam为例: "C:\Program Files (x86)\Steam\Steam.exe" 然后编写注册表: Windows Registry Ed ...
- 【Windows】Win10 20H2版本 管理员身份问题
问题描述: 从之前的1909版本升级过来的,在一开始就是管理员身份,升级之后还是管理员身份没错 但是打开一些软件又会开始提示是否安全,还有C盘访问权限警告. 解决办法: 参考方案地址 http://w ...
- 【转载】 pytorch reproducibility —— pytorch代码的可复现性
原文地址: https://www.jianshu.com/p/96767683beb6 作者:kelseyh来源:简书 ======================================= ...
- x86_64/aarch64架构下ffpyplayer源码编译
问题来源: 某鱼上挂着pytorch的aarch64架构下的源码编译,遇到某网友提出的要在aarch64架构下的ubuntu上ffpyplayer源码编译,于是有了本文. ============== ...