axios通过pdf下载地址预览pdf

小灰灰 2022-10-21 11:58 275阅读 0赞

## 前言 ##

最近做一个功能，根据一个pdf的下载地址，做出既能下载又能预览pdf的两个功能按钮，因为地址本身在浏览器中打开就能下载，直接记录怎么实现预览功能。

## 具体步骤 ##

1.前台html代码

<iframe id="iframe" frameborder="0" style="width: 100%; height: 100%"></iframe>

2.前台js代码

axios({ 
      method: 'get',
      url:'/preview', 
      params:{ 
           pdfUrl:'https://xxxx/xxx/xxx.pdf'
      },
      responseType: 'blob',
    }).then(function (response) { 
      let blob = new Blob([response.data], {  type: response.data.type })
      let url = URL.createObjectURL(blob)
      document.getElementById('iframe').src = url
    }).catch(err => { 
    });

3.后台代码

@RequestMapping("/preview")
        public void preview(HttpServletResponse response, String pdfUrl) { 
            response.setContentType("application/pdf");
            try(OutputStream out = response.getOutputStream();
                InputStream in = new BufferedInputStream(new URL(pdfUrl).openConnection().getInputStream())) { 
                byte[] b = new byte[1024];
                int len = 0;
                while ((len = in.read(b))!=-1) { 
                    out.write(b,0,len);
                }
                out.flush();
            } catch (Exception e) { 
                System.out.println(e);
            }
        }

## 后记 ##

实现办法还有用pdf.js，因为不想在vue中添加依赖，没有采用。

发表评论取消回复

表情：

评论列表（有 0 条评论，275人围观）

还没有评论，来说两句吧...

相关阅读

相关前端通过url预览pdf文件

目中需要通过链接来预览pdf，代码如下： > <a href=" w e b p a t h / d o w n / p r e v i e w U r l . p a...

水深无声/ 2024年04月17日 06:28/ 0 赞/ 108 阅读

相关 pdf预览

> 首先下载pdf.js插件，放到项目里面 > > 官网下载地址：[http://mozilla.github.io/pdf.js/getting\_started/\dow

小咪咪/ 2023年07月25日 06:25/ 0 赞/ 67 阅读

相关通过PDF.js实现PDF文件在线预览

1.官网下载PDF.js 我的资源地址：[https://download.csdn.net/download/rexueqingchun/11974119][http

你的名字/ 2023年06月12日 13:29/ 0 赞/ 62 阅读

相关 axios通过pdf下载地址预览pdf

前言最近做一个功能，根据一个pdf的下载地址，做出既能下载又能预览pdf的两个功能按钮，因为地址本身在浏览器中打开就能下载，直接记录怎么实现预览功能。具体步骤

小灰灰/ 2022年10月21日 11:58/ 0 赞/ 276 阅读

相关 vue 预览pdf

<embed :src="previewSrc" type="application/pdf" width="1200px"

偏执的太偏执、/ 2022年10月05日 09:45/ 0 赞/ 467 阅读

相关 vue-pdf 通过文件流预览pdf文件

前端预览pdf功能，后端返回文件流的形式 1 首先，下载vue-pdf > npm install vue-pdf -D 2 其次，模板里面引入vue-pdf > im

「爱情、让人受尽委屈。」/ 2022年08月30日 05:23/ 0 赞/ 2181 阅读

相关在线预览PDF

![Center][] [Center]: /images/20220608/c09bd51aa5234ade90362ac3f95d3ae7.png

本是古典何须时尚/ 2022年06月08日 07:16/ 0 赞/ 499 阅读

相关文件上传下载PDF预览

1. 创建数据库 --创建文件对象表 CREATE TABLE sys_file ( id bigint NOT NULL identity(1,

不念不忘少年蓝@/ 2022年04月10日 08:47/ 0 赞/ 412 阅读

相关 pdf预览 pdf.js+pdfObject

1.下载pdf.js 第一步，下载源码：git clone git://github.com/mozilla/pdf.js.git （直接github下载zip 不能直接使

秒速五厘米/ 2021年10月19日 09:48/ 0 赞/ 654 阅读

相关 pdf文档预览

效果 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Fx

待我称王封你为后i/ 2021年09月20日 09:44/ 0 赞/ 712 阅读