当前位置：首页 > news >正文

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

news 2024/10/24 12:22:34

背景

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

原理

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

Content-Type: application/pdf
Content-Disposition: inline;

如何做

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

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

const http = require('http');
const nodefetch = require('node-fetch');const PORT = 3000;const server = http.createServer(async (req, res) => {if (req.url === '/get-pdf' && req.method === 'GET') {let PDF_URL = req.query.urllet pass = await checkUrl(PDF_URL)if (!pass) {res.send('Not Found');return}// 请求第三方PDF文件let data = nulltry {data = await nodefetch(PDF_URL, {method: "GET",headers: {"Content-Type": "application/pdf",}})} catch (error) {data = {body: 'error'}}// 重点在这里res.setHeader('Content-Type', 'application/pdf')res.setHeader('Content-Disposition', 'inline')data.body.pipe(res)} else {res.writeHead(404, { 'Content-Type': 'text/plain' });res.end('Not Found');}
});function checkUrl(url){// 可以配置白名单，或者域名校验一下url = decodeURIComponent(url)let domain = url.split('/')[2]if (domain === 'localhost:3000'){return true} else {return false
}server.listen(PORT, () => {console.log(`Server is listening on port ${PORT}`);
});