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 ... 
随机推荐
- Django 不通过外键实现多表关联查询
			Django不通过外键实现多表关联查询 by:授客 QQ:1033553122 测试环境 Win 10 Python 3.5.4 Django-2.0.13.tar.gz 需求 不通过外键,使 ... 
- 解密prompt系列34. RLHF之训练另辟蹊径:循序渐进 & 青出于蓝
			前几章我们讨论了RLHF的样本构建优化和训练策略优化,这一章我们讨论两种不同的RL训练方案,分别是基于过程训练,和使用弱Teacher来监督强Student 循序渐进:PRM & ORM So ... 
- 【Vue】二维码生成
			按组长提供的样例,功能比较相符合的是这个博客: https://www.jianshu.com/p/8d59107e1992 这个博客引用的是这篇文章: https://blog.csdn.net/w ... 
- 【Java】JNDI实现
			前提情要: 培训的时候都没讲过,也是书上看到过这么个东西,进公司干外包的第二个项目就用了这个鬼东西 自学也不是没尝试过实现,结果各种失败,还找不到问题所在,索性不写了 JNDI实现参考: 目前参考这篇 ... 
- 【IDEA】找不到类资源
			报错问题描述: 找不到这个实例调用的方法或者方法缺失重载 找不到这个声明的类资源 解决情况一 import声明缺失,IDEA智能导包提示可以解决 注意,如果存在了重名的类资源,导入了错误的资源,实例引 ... 
- 如何为anaconda配置动态链接库——ERROR: compiler_compat/ld: cannot find
			现在为python编译lib库的环境主要是使用anaconda,而之前往往都是使用自编译python环境,然后使用Linux的系统lib环境,但是现在由于都是使用anaconda环境来编译python ... 
- 使用TensorFlow、Pytorch等深度学习框架时如何设置对OpenCV的使用
			如题: 在使用深度学习框架时如果同时也在使用opencv那么有一些设置是需要设定的,第一个就是在python代码中设定禁止使用opencl: cv2.ocl.setUseOpenCL(False) o ... 
- Analysis of Set Union Algorithms 题解
			题意简述 有一个集合,初始为空,你需要写一个数据结构,支持: 0 x 表示将 \(x\) 加入该集合,其中 \(x\) 为一由 \(\texttt{0} \sim \texttt{9}\) 组成的数字 ... 
- 进击的AI工具集:全能AI阅读软件Walles AI
			在信息爆炸的时代,快速而准确地阅读大量内容,对于每个人都是一种常态挑战. 这些海量信息资讯和知识的涌入,可能导致信息过载,手忙脚乱,且分神费力. 好消息是,我们已经进入了 AIGC时代,随着ChatG ... 
- 【全】CSS动画大全之其他【移动盒子显示详情】
			效果预览 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> < ... 
