如安在浏览器中打开预览pdf，而不是下载

背景

上传了pdf文件之后，点击查看，跳转pdf的url，渴望是浏览器中预览，而不是直接下载
原理

必要pdf资源url的响应头是下面下面这2个属性

1. Content-Type: application/pdf
2. Content-Disposition: inline;

复制代码

怎样做

• 如果pdf资源服务器是本身内部可修改的，那就让服务修改下响应头
  
• 如果无法修改，可以本身写一个代理服务，服务端请求到资源后，修改响应头，在返回给客户端
  

代理服务的代码实现
请求方式：http://localhost:3000/get-pdf?url=http://xxxxx/xxxxx.pdf
注意：pdf资源的url不要使用https，否则会验签失败

1. const http = require('http');
2. const nodefetch = require('node-fetch');
4. const PORT = 3000;
6. const server = http.createServer(async (req, res) => {
7.   if (req.url === '/get-pdf' && req.method === 'GET') {
8.           let PDF_URL = req.query.url
9.     let pass = await checkUrl(PDF_URL)
10.     if (!pass) {
11.             res.send('Not Found');
12.         return
13.     }
14.     // 请求第三方PDF文件
15.     let data = null
16.     try {
17.         data = await nodefetch(PDF_URL, {
18.             method: "GET",
19.             headers: {
20.                 "Content-Type": "application/pdf",
21.             }
22.         })
23.     } catch (error) {
24.         data = {
25.             body: 'error'
26.         }
27.     }
28.     // 重点在这里
29.     res.setHeader('Content-Type', 'application/pdf')
30.     res.setHeader('Content-Disposition', 'inline')
31.     data.body.pipe(res)
34.   } else {
35.     res.writeHead(404, { 'Content-Type': 'text/plain' });
36.     res.end('Not Found');
37.   }
38. });
40. function checkUrl(url){
41.   // 可以配置白名单，或者域名校验一下
42.   url = decodeURIComponent(url)
43.    let domain = url.split('/')[2]
44.   if (domain === 'localhost:3000'){
45.         return true
46.   } else {
47.   return false
48. }
50. server.listen(PORT, () => {
51.   console.log(`Server is listening on port ${PORT}`);
52. });

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。