vue3使用pdfjs和iframe实现pdf预览

Vue3使用pdf.js和iframe可以实现PDF预览。具体步骤如下：
1. 下载pdf.js并将其放在项目的public文件夹中。
2. 在Vue3组件中引入pdf.js和iframe。
3. 在data中定义pdfUrl，即pdf文件的地址。
4. 在template中使用iframe标签，并将src属性设置为pdfUrl。
5. 在script中导出组件。

需要注意的是，pdfUrl需要使用encodeURIComponent方法对pdf文件的地址进行编码，以避免出现特殊字符导致的错误。同时，还可以使用vue-pdf插件来实现更多的PDF预览功能，如上下页切换、放大缩小、旋转等。

相关问题

vue3-pdfjs预览pdf

### 集成 pdf.js 到 Vue 3 项目

为了在 Vue 3 中使用 `pdf.js` 来实现 PDF 文件预览，可以按照如下方法操作：

#### 准备工作

确保在项目的 `public/lib/` 目录下创建名为 `pdfjs` 的子目录，并将下载好的 `pdf.js` 库文件放置于此处[^1]。

#### 组件开发

通过 `<iframe>` 标签加载 PDF 查看器是一种简单有效的方式。下面是一个完整的组件实例展示如何配置路径以及初始化查看器:

<template>
    <div class="pdf-viewer">
        <!-- 使用 iframe 加载 PDF -->
        <iframe :src="viewerUrl" frameborder="0"></iframe>
    </div>
</template>

<script>
export default {
    name: 'PdfViewer',
    data() {
        return {
            url: '', // 存储要显示的PDF文档URL
            viewerPath: '/lib/pdfjs/web/viewer.html' // 设置相对路径指向pdf.js库内的HTML查看页面
        }
    },
    computed: {
        // 计算属性拼接最终访问链接
        viewerUrl(){
            const encodedFile = encodeURIComponent(this.url);
            return `${this.viewerPath}?file=${encodedFile}`;
        }
    },
    props:{
        fileSrc:{ type:String, required:true}
    },
    created(){
        this.url=this.fileSrc;
    }
};
</script>

<style scoped>
/* 添加样式 */
.pdf-viewer{
    width: 100%;
    height: calc(100vh - 2rem); /* 调整高度适应视窗大小 */
}

iframe {
    width: 100%;
    height: 100%;
    border:none;
}
</style>

此代码片段定义了一个简单的 Vue 组件用于呈现 PDF 文档。它接收一个 prop (`fileSrc`) 表示目标 PDF 文件的位置，并将其编码后附加到 `pdf.js` 提供的 HTML 查看界面 URL 后面作为查询参数传递给浏览器解析[^2]。

pdfjs实现pdf在线预览vue

PDF.js是由Mozilla开发的一个JavaScript库，它允许你在浏览器环境中离线查看、渲染PDF文件。在Vue.js项目中集成PDF.js，你可以实现在网页上对PDF文档的在线预览功能，无需依赖外部插件。

以下是基本步骤：

1. **安装依赖**:
首先，在Vue项目中安装pdfjs-dist库，可以使用npm或yarn:

   npm install pdfjs-dist vue-file-loader
   // 或者
   yarn add pdfjs-dist vue-file-loader

2. **引入并配置PDFWorker**: PDF.js需要Web Worker来处理复杂的PDF解析任务，所以你需要创建一个`worker.js`文件，并在Vue组件中引用它。

3. **在Vue组件中处理PDF预览**:
使用`<script type="application/pdf">`标签来展示PDF内容，配合Vue的动态绑定和事件监听。例如：

   <template>
     <div id="preview">
       <iframe :src="getPDFSrc()" style="width:100%;height:600px;"></iframe>
     </div>
   </template>

   <script>
   import { ref } from 'vue';
   import * as PDFJS from 'pdfjs-dist';

   export default {
     setup() {
       const pdfUrl = ref('path/to/your/file.pdf'); // 你的PDF文件路径

       async function getPDFSrc() {
         const pdfDoc = await PDFJS.getDocument(pdfUrl.value);
         return URL.createObjectURL(pdfDoc.getOperatorList());
       }

       onMounted(() => {
         this.$watch(pdfUrl, () => {
           if (pdfUrl.value) {
             // 初始化预览
           }
         });
       });

       return {
         pdfUrl,
         getPDFSrc
       };
     }
   };
   </script>

4. **注意点**:
- 使用`URL.createObjectURL()`创建临时URL来加载PDF，避免直接在HTML里插入大文件导致性能问题。
- 更新`pdfUrl`时，记得清理旧的PDF资源，以便内存管理和性能优化。