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 ...
随机推荐
- Odoo 菜单定义和修改学习总结
odoo菜单定义和修改学习总结 环境 odoo-14.0.post20221212.tar 定义菜单 方式1: <?xml version="1.0"?> <od ...
- ABC350
A link 把最后三位取成数字,判断是否小于\(349\),大于\(1\),不等于\(316\). 点击查看代码 #include<bits/stdc++.h> using namesp ...
- 【Hibernate】01 概述
什么是Hibernate? - Hibernate是我们JavaEE开发中的DAO层框架 - DAO[Data Access Object] 数据访问对象层 - 在DAO层,访问数据库,进行CRUD操 ...
- MIT6.1810の学习笔记
webliuのmit.6.828学习笔记 写在前面 本文基于mit/6.828课程,附官方网址. 本文采用的实验环境为2020年版的xv6系统,需要wsl,vscode,docker工具.附环境配置教 ...
- SMU 2024 spring 天梯赛自主训练3
SMU 2024 spring 天梯赛自主训练3 7-1 2018我们要赢 - SMU 2024 spring 天梯赛自主训练3 (pintia.cn) 2018 wo3 men2 yao4 ying ...
- 什么是状态机?用C语言实现进程5状态模型
前言 状态机在实际工作开发中应用非常广泛,在刚进入公司的时候,根据公司产品做流程图的时候,发现自己经常会漏了这样或那样的状态,导致整体流程会有问题,后来知道了状态机这样的东西,发现用这幅图就可以很清晰 ...
- debian10环境安装rtpengine
操作系统 :debian 10.13_x64 rtpengine版本:10.5 最新的debian12环境可通过apt直接安装rtpengine,但工作中有时候还会涉及到debian10这样的老系统, ...
- Fluent Editor:一个基于 Quill 2.0 的富文本编辑器,功能强大、开箱即用!
你好,我是 Kagol,个人公众号:前端开源星球. 今年4月份,听到 Quill 2.0 正式发布的消息,我心情非常激动,立马体验了下,并写了一篇文章. 重回铁王座!时隔5年!Quill 2.0 终于 ...
- js_问题记录2022年6月24日19:35:12
小问题中的大问题 新建子js脚本一定记得创建函数,不然写什么都无法实现 比如 新建了new1.js脚本,首先需要创建function后才能在里面进行参数操作和调用 js实现的功能: 获取到对应的id= ...
- AI产品经理的探索:技能、机遇与未来展望
Ai时代的产品经理 随着人工智能(AI)的飞速发展,AI已经从一个前沿技术概念逐步演变为驱动各行业创新的核心力量.从智能助手到自动驾驶,从个性化推荐系统到图像识别,AI正在以不可思议的速度改变着我们的 ...