【Vue实用功能】Vue实现文档在线预览功能,在线预览PDF、Word、Excel、ppt等office文件
【Vue实用功能】Vue实现文档在线预览功能,在线预览PDF、Word、Excel、ppt等office文件
【Vue实用功能】Vue实现文档在线预览功能,在线预览PDF、Word、Excel、ppt等office文件
文章目录
@[TOC](文章目录)方法一、 Luckysheet 预览方法二、 Office Web 查看器(微软的开发接口)方法三、 XDOC文档预览云服务(预览pdf、word、xls、ppt)
文章目录
@[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;">