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. Kubernetes 存储概念之Volumes介绍

    Volumes 默认情况下容器中的磁盘文件是非持久化的,对于运行在容器中的应用来说面临两个问题,第一:当容器挂掉,K8S重启它时,文件将会丢失:第二:当Pod中同时运行多个容器,容器之间需要共享文件时 ...

  2. ComfyUI插件:IPAdapter_plus(新版)节点

    ComfyUI插件:IPAdapter_plus(新版)节点 前言: 学习ComfyUI是一场持久战,而IPAdapter_plus是常用且便捷有效的风格迁移模型,可以通过提供参考图像去进行图像的生成 ...

  3. lambda表达式用法

    (参数列表)->{代码块}; (int a,int b)->{return a+b;}; 本质为匿名函数 参数的类型可以省略: (a,b)->{return a+b;} 当参数只有一 ...

  4. 如何立刻读取在MySQL中自动生成的主键

    在写一个接口时,我们需要对两个表分别动刀,但是我们需要前一个表的主键作为下一个表的功能外键, 如果使用mybatisplus,insert完成之后便可以直接在对象中取出这个id值 如果使用mybati ...

  5. OpenStack 基本命令

    keystone source /etc/keystone/admin-openrc.sh #登录 openstack user create --password ps1234 --email hq ...

  6. PyCharm设置背景主题

    PyCharm修改主题的路径: File->Settings->Appearance &Behavior->Appearance 1.  Intellij:白色 2. Dar ...

  7. 【Hbase】1.3.1版本安装

    环境: 1核4G内存128G磁盘,三台机器同一个配置 192.168.242.131 192.168.242.132 192.168.242.133 -- Linux Centos7 x64 系统平台 ...

  8. 【Vue】Re23 组件封装

    视频地址: https://www.bilibili.com/video/BV15741177Eh?p=119 common.css /* 演示案例是base.css */ body { paddin ...

  9. Google的TPU的Pallas扩展无法使用jax的随机数生成

    Google的TPU的Pallas无法使用jax的随机数生成 地址: https://jax.readthedocs.io/en/latest/pallas/tpu.html

  10. Golang在整洁架构基础上实现事务

    前言 大家好,这里是白泽,这篇文章在 go-kratos 官方的 layout 项目的整洁架构基础上,实现优雅的数据库事务操作. 视频讲解 :B站:白泽talk,公众号[白泽talk] 本期涉及的学习 ...