vue2 pdfjs

### 集成 PDF.js 到 Vue 2 项目

#### 准备工作
为了使 PDF.js 正确运行于 Vue 2 项目中，需先安装并配置必要的依赖项。下载好 `pdf.js` 的发布版本之后，应将其内的 `build` 和 `web` 文件夹放置到项目的 `public/pdfjs/` 路径下[^2]。

#### 创建组件结构
创建一个新的 Vue 组件用于管理 PDF 显示逻辑。此组件的数据属性应当至少包含如下字段：

data: function () {
    return {
        pdffile: {},
        isPDFVisible: false,
        pdfPages: 0,
        viewDlgWidth: '80%',
        // 更多数据属性...
    }
}

这些变量分别用来存储当前加载的 PDF 文档实例、控制对话框可见性的布尔值、记录总页数以及设置查看器宽度等参数[^1]。

#### 加载与渲染 PDF
通过引入外部脚本的方式，在页面初始化阶段完成对核心库文件 (`pdf.min.js`) 及其 Web 工具集 (`pdf_viewer.min.js`, `compatibility.min.js`) 的加载。接着利用 JavaScript API 来获取指定 URL 或 Blob 对象形式的目标文档，并逐页解析绘制至 Canvas 上展示给用户。

对于远程服务器上的资源访问，则可通过发起 HTTP 请求来取得二进制流响应体作为输入源之一。例如基于 Spring Boot 构建的服务端可以提供 `/previewPDF` 接口返回所需的内容类型为 `application/octet-stream` 的字节序列化后的 PDF 文件[^3]。

<template>
<div id="app">
    <!-- ... -->
</div>
</template>

<script src="/path/to/pdf.min.js"></script> <!-- 引入 pdf.js 库 -->
<script type="text/javascript">
import axios from 'axios';

export default {
    methods: {
        async loadPdf(url) {
            const loadingTask = pdfjsLib.getDocument({ url });
            this.pdffile = await loadingTask.promise;
            this.pdfPages = this.pdffile.numPages;

            let canvasContainer = document.getElementById('canvas-container');
            for (let i = 1; i <= this.pdfPages; ++i) {
                var page = await this.pdffile.getPage(i);
                
                var viewport = page.getViewport({ scale: 1.5 });
                var canvas = document.createElement('CANVAS');
                var context = canvas.getContext('2d');
                canvas.height = viewport.height;
                canvas.width = viewport.width;

                var renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };
                await page.render(renderContext).promise;

                canvasContainer.appendChild(canvas);
            }

            this.isPDFVisible = true;
        },
        
        fetchAndShowRemotePdf() {
            axios({
              method: 'get',
              url: '/api/previewPDF', 
              responseType: 'blob'
            }).then((response)=>{
               const fileUrl = window.URL.createObjectURL(new Blob([response.data]));
               this.loadPdf(fileUrl);
             })
        }
    },

    mounted(){
      // 假设这里调用了某个方法去触发 PDF 加载过程
      this.fetchAndShowRemotePdf();
    }
};
</script>

上述代码片段展示了如何定义一个名为 `loadPdf()` 方法接收目标地址字符串参数并通过异步方式处理整个流程；同时也给出了针对网络位置上静态或动态生成材料的具体应用场景——即向后端请求特定路径下的实际内容再传递给前者执行进一步操作。