vue3中封装一个PDF,Excel,Word,PPT等文件预览功能的方法

最新推荐文章于 2024-06-27 14:51:23 发布
最新推荐文章于 2024-06-27 14:51:23 发布
阅读量1.7k 收藏 3
点赞数
文章标签： pdf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64816413/article/details/130585213
版权

这里我使用的是调用微软的在线预览功能 方便简单又快捷！

必须要注意的是:需要访问的文件地址必须得是公开访问的，必须是域名，不能是IP地址！

我这里的需求是打开新的页面预览，大家也可以使用iframe标签将文档嵌入到页面当中实现在线预览！话不多说直接上代码！！

1.创建一个JS文件，封装这个方法，方变提供给每个需要用到的地方使用

2.https://view.officeapps.live.com/op/view.aspx?src='+(要访问的文件地址就行)

3.我这里做了判断，图片类型直接打开就能访问，其它类型例如rar，zip文件打开会直接下载，如果是PDF、Excel、Word、PPT、就通过微软的地址+上你要访问的文件地址就可以啦。

4.如何在页面中调用，在JS中引入你封装代码的js文件，直接调用传入url就完成啦

 5.一起来看看效果吧

 

 

 

 

小豪有点帅
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端vue3实现本地及在线文件预览（含pdf/txt/mp3/mp4/docx/xlsx/pptx）
Sylvasylva的博客
11-10 1万+
本地或内网预览需要借助插件实现，pdf、mp3、mp4等主要靠原生标签或浏览器自带功能，尽量减少了插件的安装。
vue学习ppt
10-23
这是一个车不认识vue的简单ppt，轻松演示，画面简洁，一目了然！
PPTist：基于Vue3.x + TypeScript的在线演示文稿应用
02-09
PPTist 一个基于Vue3.x + TypeScript的在线演示文稿应用，还原了大部分PPT常用功能，支持文字，图片，形状，线条，图表，表格6种最常用的元素类型，每一种元素都拥有高度可编辑能力，同时支持丰富的快捷键和快捷菜单，重新还原本地桌面应用的使用体验。 您可以对它进行二次开发，打造属于自己的在线演示文稿应用或在线设计工具（二次开发文档正在编写中）。 在线体验地址（优先更新）： : 如果网络状态不佳，可以访问国内实体： ://pptist.gitee.io/ Github仓库： : 项目运行 npm install npm run serve 功能列表 通用功能 历史记录 快捷键 快捷菜单 主题设置 幻灯片页面编辑 页面添加，删除 页面顺序调整 页面复制粘贴 背景设置（纯色，渐变，图片） 网格线 幻灯片元素编辑 元素添加，删除 元素复制粘贴 元素拖拽移动 元素旋转 元
vue3 文件流预览常见文件(xls,xlsx,ptf,txt,img,excel)
tao20010624的博客
06-11 1047
PPT格式转换可能会跟vue的 Object.defineProperty()方法冲突。如果是vue2.6版本或以下还需要额外安装 @vue/composition-api。
vue3实现word，excel，pdf，mp3，mp4，ppt，txt文件预览
weixin_45449046的博客
03-10 5304
vue3实现word，excel，pdf，mp3，mp4，ppt，txt文件预览
vue预览 pdf、word、xls、ppt、txt、csv文件方法
MISS_zhang_0110的博客
05-10 1037
word、xls、ppt、pdf 这些文件要用 微软官方的预览地址。注意：1. 文件地址必须公网；2. 静态资源不要有访问权限。
vue 实现 word/excel/ppt/pdf 等文件格式预览操作
最新发布
_NIXIAKF的博客
06-27 734
vue 实现 word/excel/ppt/pdf 等文件格式预览操作
vue3 + vite 在线预览docx, pdf, pptx（内外网）并实现移动端适配
当然是最帅气的茶茶丸了！哇耶~
05-23 7514
使用docx-preview安装插件引入依赖。
vue3个人学习进度（PPT版）
桑桑和阿战
08-16 1154
【译PPT】尤雨溪：Vue 3.0的设计原则
weixin_46837985的博客
12-25 346
点击上方“前端进阶周刊”，选择“置顶或者星标”期待你的关注！前言2019年11月11号在Vue Toronto 2019会议上，@尤雨溪做了关于《Design Principles of...
vue怎么实现office，PDF，图片，OFD文件预览
一步一个脚印，踏实努力，向着目标前进
06-15 7906
要在Vue中实现Office、PDF、图片和OFD文件的预览，可以使用不同的第三方库来处理不同类型的文件。以下是一个详细的教程和代码示例，使用vue-pdf库来预览PDF文件，使用库来预览Office文件（如Word、Excel和PowerPoint），使用库来预览图片文件，使用库来预览OFD文件。
vue项目中常见的三种文件类型在线预览实现(pdf/word/excel表格)
i_Satan的博客
08-15 1564
文件预览
vue项目想预览pdf文档的使用方法和代码
05-24
主要是vue项目想预览pdf文档的使用方法和代码，使其按照每一页的方式可以上下翻看
基于 Vue3.x + TypeScript 的在线演示文稿（幻灯片）应用源码.zip
05-18
基于 Vue3.x + TypeScript 的在线演示文稿（幻灯片）应用，还原了大部分 Office PowerPoint 常用功能，实现在线PPT的编辑、演示。支持导出PPT文件。
VUE初学者必看PPT
09-28
VUE初学者必看PPT的课程资源，深入浅出，很有意义，MVVM模式，从Vue到页面。物超所值，大家快来下载！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
Vue实现文件预览，支持word excel pdf ppt image txt mp4等格式
10-14
创建一个Vue组件，例如名为 `FilePreview.vue`，在这个组件中，你需要定义接收文件的属性和预览的方法。 4. **文件预览逻辑**： - **文本/HTML预览**：对于.txt或.html文件，可以使用 `innerHTML` 属性直接展示在...
vue前端解析word,pdf,exl,图片，视频等文件预览，支持base64格式文件 预览
04-06
vue前端解析word,pdf,exl,图片，视频等文件预览，支持base64格式文件转Blob流 预览。实现前端选择文件 直接在页面展示，或者请求后端获取base64 string 字符串 转码 在前端页面展示
vue中如何实现pdf文件预览的方法
10-18
主要介绍了vue中如何实现pdf文件预览的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Word,Excel,PDF文件预览
07-01
综上所述，实现“Word,Excel,PDF文件预览”功能涉及到文件格式的处理、文件转换、前端技术的应用、服务器资源的管理和用户交互等多个方面，这些知识点构成了一个完整的文件预览解决方案。在实际开发过程中，还需要...
vue3写一个预览pdf文件功能
03-31
在Vue3中预览PDF文件，可以使用pdf.js库。以下是实现步骤： 1. 安装pdf.js库：可以使用npm安装，命令为：`npm install pdfjs-dist` 2. 在Vue3组件中引入pdf.js库：在组件的`<script>`标签中添加以下代码： ```javascript import pdfjsLib from 'pdfjs-dist/webpack'; pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.js`; ``` 这里，我们将pdf.js库引入，并将全局的worker路径设置为cdn地址。 3. 在组件的`<template>`标签中添加一个`<canvas>`标签，用于显示PDF文件内容： ```html <canvas ref="pdfCanvas"></canvas> ``` 这里，我们使用Vue3的ref属性获取canvas元素的引用。 4. 在Vue3组件中添加以下代码，用于加载并预览PDF文件： ```javascript async loadPdf() { const url = 'https://example.com/sample.pdf'; // PDF文件的url地址 const canvas = this.$refs.pdfCanvas; // 获取canvas元素的引用 const loadingTask = pdfjsLib.getDocument(url); // 加载PDF文件 const pdf = await loadingTask.promise; // 等待PDF文件加载完成 const page = await pdf.getPage(1); // 获取第一页 const viewport = page.getViewport({ scale: 1.0 }); // 获取视口 canvas.height = viewport.height; // 设置canvas高度 canvas.width = viewport.width; // 设置canvas宽度 const renderContext = { canvasContext: canvas.getContext('2d'), viewport: viewport }; await page.render(renderContext).promise; // 渲染第一页 } ``` 这里，我们首先设置PDF文件的url地址，然后获取canvas元素的引用和PDF文件对象。接着，我们获取第一页并获取视口大小，然后设置canvas的大小。最后，我们使用renderContext将第一页渲染到canvas中。 注意：在实际使用中，需要根据PDF文件的页数循环渲染每一页。 5. 最后，在组件的`created`钩子函数中调用`loadPdf`方法，即可预览PDF文件： ```javascript export default { created() { this.loadPdf(); }, methods: { async loadPdf() { // ... } } } ``` 这里，我们在组件创建时调用`loadPdf`方法，实现PDF文件的预览。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值