背景 有的时候我们需要在前端页面上预览某些文档,文档的格式比如:word、ppt、pdf、图片等等 实现方案 可以使用@zuiyouliao/vue-file-viewer第三方库,官方地址 方式1:通过组件方式引入 优点:word/图片可以识别,方便快捷。 缺点:pdf/pptx文件无法识别。 安
在组件中使用 viewerjs: <template> </template> import 'viewerjs/dist/viewer.css'; import Viewer from 'viewerjs'; export default { name: 'FileViewer', props: ['fileUrl'], mounted() { new Viewer(document.getElementById('viewer-container'), { url: 'data-original' }); } } 二...
file-viewer.iml init:项目初始化 3年前 package-lock.json init:项目初始化 3年前 package.json feat: 配置husky7.0.1版本的钩子 3年前 vue.config.js feat:映入格式化插件,代码格式化 3年前 README 简介 一个在线的文档预览器。支持word、excel、PPT、图片、视频、文本等等。支持网址拼接预览、自行上传预览。
常规情况下,请使用npm link的方式进行集成。 假设您将本项目clone到了D:\Works\file-viewer下,接下来请按照下面的步骤进行安装。 首先,打开命令行工具,cd [你的项目位置],然后执行npm link D:\Works\file-viewer。最后,在您的项目中引用即可。 import FileViewer from "file-viewer"; Vue.use(FileViewer) 1....
接下来,在需要使用pdf.js的Vue组件中引入并配置该库。以下是一个示例组件代码: <template> </template> import pdfjsLib from 'pdfjs-dist/build/pdf'; import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry'; pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker; export default { name...
基于Vue2实现的文件在线预览file-viewer本项目是本人基于实际工作共享的第一个小项目,诞生于2022年上旬。目前实现了基本格式的预览。 本项目作为vue3版本的子项目,不再进行更新,使用Vite+Vue2.7+Ts实现了Composition Api的兼容。已支持Vue3+Vite+TypeScript,请拉取v3分支进行体验。后续将持续优化pptx和word模块。目前...
3.3 使用 PDF.js 提供的 API 加载和渲染 PDF 文件 现在,您可以在Vue组件的JavaScript部分编写加载和渲染PDF文件的逻辑。在Vue组件的标签中,添加以下代码: exportdefault{ mounted() { this.loadPDF(); }, methods: { asyncloadPDF() { constpdfUrl ='path/to/your/pdf/file.pdf';// 替换为您的PDF文件路...
vue中使用viewer.js pdf 预览 在Vue.js项目中使用PDF.js（及其配套的viewer.js）预览PDF文件，通常需要以下步骤：1.安装PDF.js：o如果使用npm包管理器，可以直接通过命令行安装pdfjs-dist：Code npm install --save pdfjs-dist 2.引入PDF.js库：在Vue组件中引入PDF.js的核心库和viewer组件：Javascript import ...
--<PdfViewerv-if="url" :url="url" :type="'canvas'" :pdfjsDistPath="'/src/components/pdfjsDistPath'"></PdfViewer><pdfv-if="url" :url="url" :type="'canvas'" :pdfjsDistPath="'/src/components'"/>--> <!--!!!注意这里,这里需要注意的地方有2个,第一个是我们的url,这个就是我们...
3、excel文件 目前excel文件已经有了类似pdf.js那样的解析sheet.js 总结 1、免费纯前端方式实现在线预览word、excel、ppt最优选择微软在线预览(不可编辑) 2、利用后端将文件转为图片,前端以图片形式预览(可行方案) 3、购买在线预览服务例如百度DOC文档服务、永中、I DOC VIEW等 本文参与 腾讯云自媒体同步曝光计划,...