本文记录自己本机（mac系统）使用ngnix，搭建在线预览pdf服务的过程。

nginx

mac系统，配置nginx 【Mac】NGINX快速安装教程与使用教程（适合m1/m2）_mac 下载nginx使用-CSDN博客 Mac 安装Nginx详细教程 - 掘金

下载pdfjs发布版

PDF.js 是一款开源的 pdf 文档读取解析插件，可以实现在 html 下直接浏览 pdf 文档。

pdf.js 是基于Promise 对象而实现的，不了解的读者可以先去看看MDN 上的解释。
pdf.js 渲染 pdf 时底层还使用了Web Worker（这会导致我们无法直接在本地运行官网下载的 demo，得在服务器上运行，详情见注意点处），不了解的读者可以去看一下阮一峰老师关于 Web Worker 的文章。

直接使用官方封装好的 viewer.html 来展示自己的 PDF 文档，该方法比较简单，不用去操作 API；而且功能比较齐全，还可复制 pdf 中的文本。

具体步骤如下：

去官网下载打包好的 Prebuilt 版本压缩包

下载地址： mozilla.github.io/pdf.js/gett…

3. 将需要打开的 PDF 文档放到与 viewer.html 文档的同一目录下 4. 新建一个 html 文件，使用 window.open 方法或 iframe 标签来打开 viewer.html，并使用 file 字段来传入 pdf 名字信息，该方法的更多详细信息可参照博文

复制pdfjs发布版到max中nginx路径下

我本机的nginx安装目录，打开目录的命令

open /opt/homebrew/Cellar/nginx/

查看html实际加载路径

open /opt/homebrew/var/www

使用命令拷贝文件夹到nginx中html指定路径下。
拷贝命令：cp -R 源文件目标文件

拷贝pdfjs-4.0.379-dist文件夹下全部内容到目标文件夹pdfjs 下。

Cp -R    /Users/cai/vs2024proj/study-demo/pdfjs-4.0.379-dist   /opt/homebrew/var/www/pdfjs

更改nginx配置

查看配置文件

open /opt/homebrew/etc/nginx

增加端口9081转发配置

server {

listen 9081;

server_name localhost;

  


#charset koi8-r;

  


#access_log logs/host.access.log main;

  


location / {

root html/pdfjs;

index index.html index.htm;

}

  


#error_page 404 /404.html;

  


# redirect server error pages to the static page /50x.html

#

error_page 500 502 503 504 /50x.html;

location = /50x.html {

root html;

}

location /views/ {

proxy_pass https://view.officeapps.live.com/;

}

# add by sunny pdfjs

location /pdfjs/ {

root html/pdfjs/web;

index index.html index.htm;

}

location /build/ {

root html/pdfjs/build;

index index.html index.htm;

}

}

增加MIME 配置

加载.mjs文件报错 MIME type of "application/octet-stream" 的解决方案

启动nginx

**启动nginx服务**

nginx

**重载配置文件**

nginx -s reload

****  


**关闭nginx服务**

nginx -s stop

****  


**查看nginx服务**

ps -ef|grep nginx

测试pdfjs

http://localhost:9081/web/viewer.html?file=shengya.pdf

新建html,使用iframe加载viewer.html

<!-- 使用iframe -->
<!-- 该方法会受iframe标签兼容性限制 -->
<iframe
  src="./web/viewer.html?file=test.pdf"
  frameborder="0"
  style="height: 800px; width: 100%"
></iframe>

<!-- 使用window.open-->
<!-- 该方法会打开新窗口 -->
<script type="text/javascript">
const fileUrl = encodeURIComponent('http://baidu.com/1111.pdf');// 远程服务器上的文件路径
    window.open("http://localhost:9081/web/viewer.html?file="+fileUrl);
    //文件和 viewer.html 同路径时
</script>

示例代码

<template>

<div class="ppt-view-test">

<iframe id="bi_iframe" title="Inline Frame Example" :style="stylePpt.view" :src="pptData.pptUrl">

</iframe> 


</div>

  


</template>

<script setup>

import { onMounted, ref, reactive, nextTick } from 'vue';

import { message } from "ant-design-vue";
 


const pptData = reactive({

data: '',

url: 'https://mooncat.run/个人生涯发展规划pptx.pdf',

pptUrl: ''

})

const stylePpt = reactive({

view: {

width: "837px",

// height: "100%",

height: "698px",

transformOrigin: "left top",

transform: "scale(0.535, 0.525)",

},

box: {

height: 698,

},

});

onMounted(() => {

const fileUrl = encodeURIComponent(pptData.url);// 远程服务器上的文件路径

//  pptData.pptUrl = "http://localhost:9081/web/viewer.html?file=" + fileUrl;

pptData.pptUrl = 'http://localhost:9081/web/viewer.html?file=shengya.pdf'

});

</script>

<style lang="less">

.ppt-view-test {

padding: 10px 10px;

text-align: left;

width: 100%;

height: 100%;

overflow: auto;

  


.one-block-1 {

font-size: 16px;

padding-top: 10px;

}

  


.one-block-2 {

padding-top: 10px;

}

}

</style>

参考文章

前端实现 PDF 预览的常见方案

pdf在线预览 pdf.js的使用

nginx发布p d fjs