使用express.js时如何在.ejs文件中正确嵌入PDF文件？

出现Cannot GET /mypdf.pdf报错的核心原因是Express没有对PDF文件所在的目录开启静态资源托管，浏览器发起的PDF资源请求没有对应的路由响应，按以下步骤操作即可解决：

操作步骤 #

• 第一步：配置静态资源托管
  在Express项目的入口文件（通常是app.js/index.js）中添加静态资源托管配置。先在项目根目录创建public文件夹，把你要展示的mypdf.pdf放到该文件夹下（也可以在public下建子目录分类存放，比如public/pdf），然后添加如下代码：

// 托管public目录下的所有静态资源
app.use(express.static('public'))
// 如果要给静态资源加访问前缀可以用如下写法，访问时路径要带上/static前缀
// app.use('/static', express.static('public'))

• 第二步：EJS文件中编写嵌入代码
  你可以根据需求选择embed/iframe/object任意一种嵌入方式，通过设置宽高或者外层容器样式即可控制PDF仅占据页面部分区域，示例如下：

方案1：使用embed标签（修正你原写法的路径即可） #

<!-- 直接设置宽高，PDF占500px宽的固定区域 -->
<embed src="/mypdf.pdf" width="500" height="375" type="application/pdf">

方案2：使用iframe标签（浏览器兼容性更好） #

<!-- 外层容器控制PDF占页面60%宽度，居中展示，仅占用页面部分区域 -->
<div style="width: 60%; margin: 30px auto;">
  <iframe src="/mypdf.pdf" width="100%" height="500px" frameborder="0"></iframe>
</div>

方案3：使用object标签（自带降级提示） #

<object data="/mypdf.pdf" type="application/pdf" width="700" height="450">
  <p>您的浏览器不支持PDF预览，可<a href="/mypdf.pdf">点击下载</a>查看</p>
</object>

常见排查点 #

• 注意src路径要和静态托管配置对应：如果PDF放在public/pdf/mypdf.pdf，则src要写/pdf/mypdf.pdf；如果静态托管配置了前缀/static，则src要写/static/mypdf.pdf
• 检查PDF文件名拼写、大小写是否和实际文件一致，部分部署环境区分文件名大小写

内容的提问来源于stack exchange，提问作者NicLovin