1987WEB视界-分享互联网热点话题和事件

您现在的位置是:首页 > WEB开发 > 正文

WEB开发

【Vue实用功能】Vue实现文档在线预览功能,在线预览PDF、Word、Excel、ppt等office文件

1987web2024-03-25WEB开发30
【Vue实用功能】Vue实现文档在线预览功能,在线预览PDF、Word、Excel、ppt等office文件

【Vue实用功能】Vue实现文档在线预览功能,在线预览PDF、Word、Excel、ppt等office文件

文章目录

@[TOC](文章目录)方法一、 Luckysheet 预览方法二、 Office Web 查看器(微软的开发接口)方法三、 XDOC文档预览云服务(预览pdf、word、xls、ppt)

方法一、 Luckysheet 预览

Luckysheet 是一个类似于 excel 的在线电子表格,功能强大、配置简单且完全开源。安装 Luckysheet1、通过CDN引入依赖由于 Luckysheet 现在还没有发布出模块化的开发,不能使用 npm,所以我们需要在 VUE 项目中手动引入相关文件。编辑 public/index.html 文件,在里面添加如下代码

<link rel=stylesheethref=https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css/><link rel=stylesheethref=https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css/><link rel=stylesheethref=https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css/><link rel=stylesheethref=https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/assets/iconfont/iconfont.css/><script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/js/plugin.js"></script><script src="https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/luckysheet.umd.js"></script>

2、指定表格容器

<template><divclass="hello"><divid="mysheet"style="margin:0px;padding:0px;width:100%;height:100vh;">