Java后端返回PDF预览给前端

这篇具有很好参考价值的文章主要介绍了Java后端返回PDF预览给前端。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前端要预览服务器PDF 可直接将要blob流返回给前端 即可用浏览器自带pdf预览功能打开,现有两种方式

方式1 返回blob流给前端 代码如下       

    @PostMapping(value = "/preview")
    @ResponseBody
    public void showPdf(HttpServletResponse response) {
        try {
            File file = new File("filePath");
            OutputStream out = null;
            try (BufferedInputStream br = new BufferedInputStream(new FileInputStream(file));
            ) {
                byte[] bs = new byte[1024];
                int len;
                response.reset(); // 非常重要
                URL u = new URL("file:///" + "filePath");
                String contentType = u.openConnection().getContentType();
                response.setContentType(contentType);
                response.setHeader("Content-Disposition", "inline;filename="
                        + "preview.pdf");
                out = response.getOutputStream();
                while ((len = br.read(bs)) > 0) {
                    out.write(bs, 0, len);
                }
                out.flush();
                out.close();
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

此时 前端解析可直接拿返回的文件流 例子如下

let blob = this.response;
          const binaryData = [];
          binaryData.push(blob);
          const url = window.URL.createObjectURL(new Blob(binaryData, { type: 'application/pdf' }));
          window.open(url);

但有的时候 不想返回文件流 可把文件返回为base64 (注意 base64可能超长)此时代码修改如下

        File file = new File("filePath");
            OutputStream out = null;
            try (BufferedInputStream br = new BufferedInputStream(new FileInputStream(file));
                         ByteArrayOutputStream outStream = new ByteArrayOutputStream();
            ) {
                int len;
                URL u = new URL("file:///" + "filePath");
                String contentType = u.openConnection().getContentType();
                byte[] buffer = new byte[1024];
                //每次读取的字符串长度,如果为-1,代表全部读取完毕
                //使用输入流从buffer里把数据读取出来
                while ((len = br.read(buffer)) != -1) {
                    //用输出流往buffer里写入数据,中间参数代表从哪个位置开始读,len代表读取的长度
                    outStream.write(buffer, 0, len);
                }
                // 对字节数组Base64编码
                Base64Encoder base64 = new Base64Encoder();
                String base64Str = replaceEnter(base64.encode(outStream.toByteArray()));


            }
        } catch (Exception e) {
        }

前端修改如下文章来源地址https://www.toymoban.com/news/detail-720961.html

 let base64 = resBase64.data.base64;
      base64 = base64.replace(/[\n\r]/g, '')
      const raw = window.atob(base64)
      const rawLength = raw.length
      const uInt8Array = new Uint8Array(rawLength)
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i)
      }
      const url = window.URL.createObjectURL(new Blob([uInt8Array], { type: resBase64.data.contentType }));
      window.open(url);

到了这里,关于Java后端返回PDF预览给前端的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端用 js-file-download组件下载后端返回的pdf,word,excel文件

    后端返回的pdf,word,excel的文件流导出需要让浏览器下载文件 1、安装js-file-download组件 2、在对应的页面引用 3、在接口返回结果后直接调用即可

    2024年02月08日
    浏览(75)
  • 【Vue】后端返回文件流,前端预览文件

      文件预览效果

    2024年01月17日
    浏览(52)
  • 前端预览pdf文件

    在前端开发中,很多时候我们需要进行pdf文件的预览操作,下面给出几种常见的预览pdf文件的方法: 如果项目对pdf的预览功能要求不高,只是要求能够看的话,可以直接在浏览器上打开pdf文件的地址,代码如下 PDF.js是一个由Mozilla开发的JavaScript库,用于在网页上呈现和操作

    2024年02月15日
    浏览(44)
  • 前端如何预览pdf文件流

    通过查找资料,可以找到如下几种方案,其中最为成熟的方案是vue-pdf 1. iframe 既可以用来浏览本地static下的文档,也可以预览后端返回的文件流文档 2. vue-pdf 较为完善的vue预览pdf的方案 3. vueshowpdf 网络上找到的一个他人封装的pdf组件 优点 缺点 原理 iframe/object/embed 简单易用

    2024年02月17日
    浏览(51)
  • 前端实现window.open实现pdf预览以及请求时携带请求头通过后端权限校验

    需求是点击预览时 跳转的一个新的页面展示 window.open携带不了token进行一个请求 window.open()方法直接根据文件路径进行跳转 根本没有走请求 自然携带不了token,知道原因以后就好解决了 我们可以先通过window.opne()方法 把我们需要的参数传递并打开一个新的页面 Window open() 方法

    2024年02月15日
    浏览(44)
  • 前端实现pdf,图片,word文件预览

    需求:实现一个在线预览pdf、excel、word、图片等文件的功能。 介绍:支持pdf、xlsx、docx、jpg、png、jpeg。 以下使用Vue3代码实现所有功能,建议以下的预览文件标签可以在外层包裹一层弹窗。 iframe标签能够将另一个HTML页面嵌入到当前页面中,我们的图片也能够使用iframe标签来

    2024年02月11日
    浏览(56)
  • vue 纯前端预览pdf,纯前端实现pdf加水印下载文件也带水印,防止pdf下载

      原理:主要是利用pdfh5这个插件来完成的   使用方法:   1.页面需要有一个容器例子:div id=\\\"demo\\\"/div   2.下载pdfh5插件 npm install pdfh5   (注意:webpack5之后不会下载polyfill 需要手动下载 所以引入pdfh5的时候会报错)   解决方案:下载 node-polyfill-webpack-plugin npm install node-polyfill-

    2024年04月15日
    浏览(68)
  • 前端js打开pdf文件--文件通过浏览器打开,以pdf形式进行预览

    通过点击button按钮,触发 @click=\\\"openPDF(performance_report)\\\"方法,把对应需要展示的pdf传送到openPDF()方法内,这里的pdf文件格式必须包括id、name、url。 在这里,performance_report为预览的文件:

    2024年02月14日
    浏览(55)
  • Java后端向前端返回文件流——实现下载功能!

    前端实现文件下载功能有多种方法,这里就不一一介绍,这里只介绍使用文件流下载的实现方法。 既然是文件流那就肯定需要给前端返回一堆二进制编码,作为后端就可以返回一个 OutPutStream 后端可以使用Java中servlet提供的 HttpServletResponse ,核心步骤是要设置响应的数据类型

    2024年02月08日
    浏览(47)
  • Java后端向前端返回文件流——实现下载功能

    前端实现文件下载功能有多种方法,这里就不一一介绍,这里只介绍使用文件流下载的实现方法。 既然是文件流那就肯定需要给前端返回一堆二进制编码,作为后端就可以返回一个 OutPutStream 后端可以使用Java中servlet提供的 HttpServletResponse ,核心步骤是要设置响应的数据类型

    2024年02月11日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包