Nuxt.js实现word、excel、ppt 和 pdf 文件在线预览

最新推荐文章于 2024-01-18 10:07:53 发布
VIP文章 最新推荐文章于 2024-01-18 10:07:53 发布
阅读量2.1k 收藏 1
点赞数
文章标签： git 数据库
原文链接：https://juejin.im/post/5cdbc50be51d45475716253c
版权

file-preview

word、excel、ppt 和 pdf 文件在线预览。查看

使用的技术

实现的功能

  • 单文件上传
  • 根据文件类型实现word、excel、ppt 和 pdf 文件的在线预览
  • 定时任务进行文件删除
  • 使用log4js打印上传、预览、定时任务删除文件的日志

支持的文件格式及大小

  • word：docx dotx
  • excel：xlsx、xlsb、
最低0.47元/天 解锁文章
weixin_33772645
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue项目Nuxt 框架.pdf
03-30
服务端渲染
Nuxt.js之自动路由原理的实现方法
10-17
主要介绍了Nuxt.js之自动路由原理的实现方法，nuxt.js会根据pages目录结构自动生成vue-router模块的路由配置。非常具有实用价值，需要的朋友可以参考下
vue-pdf 在 nuxt2 中的使用(详细注释)
最新发布
Guanchong333的博客
01-18 432
vue-pdf 在 nuxt2 中的使用(详细注释)
nuxt3项目使用pdfjs-dist预览pdf
qq_17335549的博客
09-05 1115
使用的包的源代码是但是我们实际上项目中使用的是pdfjs打包后的dist文件，也就是所以我们需要使用这个命令我们可以克隆这个包来看源代码，里面有使用的例子，也可以根据源代码自己打包生成你想要的版本的pdfjs-dist，官方文档强调了对于新旧浏览器的区别，所以我们在使用dist包的时候也要注意浏览器的兼容你要是不嫌麻烦，可以使用源码打包自己的pdfjs-dist文件使用，但是一般我们不用这么干，npm上面有现成的。
nuxt整合vue-pdf插件和使用createLoadingTask方法进行分页
weixin_38312502的博客
04-17 1万+
1.背景 目前需要做一个展示pdf功能的需求，所以想到了使用vue-pdf插件，该插件在vue-cli中很好使用，不会出现啥问题，但是放到nuxt项目中就会出现一些问题 2.整合 1.官网地址：https://www.npmjs.com/package/vue-pdf cnpm install --savevue-pdf 2.写插件js，放到plugins目录下 import Vu...
nuxt3.0学习-三、nuxt.config.ts配置、跨域处理以及浏览器适配处理
不确定因素的博客
06-07 5213
nuxt.config.ts配置、跨域处理以及浏览器适配处理
文档在线预览（四）使用js前端实现word、excel、pdf、ppt 在线预览
热门推荐
fhey的博客
05-27 2万+
本文主要介绍了word、excel、pdf、ppt等文件纯前端实现在线预览的方式，从本文的测试情况来看前端实现预览最好的效果还是PDF（或者是图片），不会出现一些文字错乱和乱码的问题，所以一般好的方案就是后端配合将不同格式的文件转换成pdf，转成统一的文件格式，再由前端实现预览效果，这样能保留文件的一些样式的效果，同时前端也只用支持一种文件格式的预览，工作量也能大大降低。
关于nuxt.js打印
前端一线搬运工的博客
12-24 2875
  当methods:{}中的一个函数声明打印命令,命令是输出数字1: methods:{ abc(){ console.log(1) } }   如果这个方法在create钩子中调用,则会在命令行和控制台中都会打印数字1: created:function(){ this.abc(); },     如果在mounted钩子中调用,则只会在...
nuxt 使用 vue-pdf ，解决报错,完美使用
weixin_49722066的博客
10-22 1908
以下为在 nuxt 框架中完整的使用方法，包括几个情况，本人都踩过坑，现在已经完美可用。 createLoadingTask 分页功能也包括在内 1、安装vue-pdf npm install --save vue-pdf 或 yarn add vue-pdf 安装完如果报错，需要指定pdfjs-dist版本号 npm install pdf[email protected] --save 2、写插件js，plugins目录下新建pdf.js文件 注意：不能直接在文件中引入，会报错 //pdf.
前端（vue）js在线预览PDF、Word、Excel、ppt等office文件
sodakii的博客
05-29 2880
mtime=文件修改时间戳（如：1633093801，精确到秒）或修改时间（如：2021-10-01 21:10:01），值改变刷新缓存。&limit=，限制页数，如：“5”表示只显示前5页，“2,5”表示从第2页开始的5页，对pdf/doc/docx/ppt/pptx有效。&pdf=true，word文档尝试以pdf方式显示，默认false。&toolbar=false，是否显示底部工具条，默认true。&expire=30，预览链接有效期，单位分钟，默认永久有效。&title=自定义标题。
nuxt实现图片预览
Banana_link的博客
03-14 631
3.找到nuxt.config.js，然后在此文件夹下的plugins将刚刚创建的文件引入。src这里就放置要预览的图片即通过调用点击事件把要预览的图片传给url，这样就可以啦。2.在plugins文件夹下创建viewer.js文件，将以下代码写进去。注：该点击事件要添加在需要被预览的图片上面。最后的实现效果就是这样，希望可以帮到你～～～以上操作都完成的话，就可以在页面中使用了。1.下载v-viewer。
文件预览：文件在线预览（ps：word，xls，ppt，pdf）
02-05
文件预览 word，excel，ppt和pdf文件在线预览。 使用的技术 Nuxt.js 表达 元素用户界面 打字机 word，excel，ppt在线预览 节点时间表 实现的功能 单文件上传 根据文件类型实现word，excel，ppt和pdf文件的在线预览 定时任务进行文件删除 使用log4js打印上传，预览，定时任务删除文件的日志 如何使用 # 下载项目 $ git clone https://github.com/XHalso/file-preview.git # 使用的mysql数据库，在根目录创建mysql的配置文件.env DB_HOST=localhost DB_PORT=3
在线文档预览，支持ppt,word,excel在线预览
09-25
使用OpenOffice + jodconverter 将文档转成pdf,通过pdf.js在页面展示 写的是Stringboot 版的demo,核心代码很少，很容易懂
HTML+JS实现浏览器在线预览文件（支持pdf、excel、ppt、doc、jpg、png格式）
04-19
浏览器在线预览文件（支持pdf、excel、ppt、doc、jpg、png格式） PS：excel、ppt、doc格式只支持公网地址，如：http://xxx/x.odc
Nuxt.js v2.8.x 开发手册.pdf
04-14
Nuxt.js v2.8.x 开发手册
Nuxt.js 数据双向绑定的实现
10-17
主要介绍了Nuxt.js 数据双向绑定的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
nuxt-three:基于nuxt.js和three.js构建的Web应用启动器
05-07
三三基于和构建的Web应用程序启动器，它包括 ， ，平滑滚动，， 和其他一些有用的东西。构建设置# install dependencies$ npm install# serve with hot reload at localhost:3000$ npm run dev# build for ...
device-module:Nuxt.js模块，用于检测设备类型
04-28
@ nuxtjs /设备 该模块将指示设备类型的标志注入到上下文和组件实例中。 参见。 设置 使用yarn或npm将@nuxtjs/device添加到开发依赖项中。 yarn add --dev @nuxtjs/device # Using npm npm install -D @nuxtjs/...
nuxt.js中间件实现拦截权限判断的方法
01-19
最近在把vue的项目改成基于nuxt.js是 ssr渲染，需要进行权限拦截判断，网上查了不少资料。最终看官方手册解决了，贴一下过程 项目环境 “element-ui”:”^2.3.4″, “flyio”:”^0.5.2″, “js-cookie”:”^2.2.0″,...
nuxt.js和vue.js的区别
05-19
Vue.js 是一个流行的 JavaScript 框架，用于构建交互式的 Web 用户界面。Nuxt.js 是一个基于 Vue.js 的应用框架，它提供了许多额外的功能和约定来帮助开发者构建更好的 Web 应用。下面是它们之间的几个区别： 1. 服务器端渲染(SSR)：Nuxt.js 提供了服务器端渲染(SSR)的功能，这使得应用程序的首次加载时间更快，并且对于搜索引擎优化(SEO)更友好。Vue.js 不包括 SSR 功能，但可以使用第三方库实现。 2. 目录结构：Nuxt.js 提供了一种特定的目录结构，其中包含 pages、layouts、components 等目录，这使得开发者可以更快地构建 Web 应用程序。Vue.js 没有这样的规定目录结构，但可以根据需要组织代码。 3. 自动路由生成：Nuxt.js 可以自动生成路由，根据 pages 目录中的文件名生成应用程序路由。Vue.js 需要手动配置路由。 4. 插件和模块：Nuxt.js 允许开发者轻松添加插件和模块，以扩展应用程序的功能。Vue.js 也有类似的功能，但需要手动配置。 总之，Nuxt.js 是基于 Vue.js 的应用框架，提供了许多额外的功能来帮助开发者更快地构建 Web 应用程序。如果你需要服务器端渲染(SSR)或自动生成路由等功能，那么使用 Nuxt.js 可能更加适合。如果你只需要一个简单的 JavaScript 框架来构建交互式的 Web 用户界面，那么 Vue.js 可能更加适合。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值