位置: IT常识 - 正文

【Vue实用功能】Vue实现文档在线预览功能,在线预览PDF、Word、Excel、ppt等office文件(vue使用方法)

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

推荐整理分享【Vue实用功能】Vue实现文档在线预览功能,在线预览PDF、Word、Excel、ppt等office文件(vue使用方法),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue功能实现,vue到底怎么用,vue实战技巧,vue的使用教程,vue实战技巧,vue到底怎么用,vue的使用教程,vue的使用教程,内容如对您有帮助,希望把文章链接给更多的朋友!

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

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/css/pluginsCss.css' /><link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/plugins/plugins.css' /><link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/luckysheet@latest/dist/css/luckysheet.css' /><link rel='stylesheet' href='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> <div class="hello"> <div id="mysheet" style="margin:0px;padding:0px;width:100%;height:100vh;"></div> </div></template><script>export default { name: 'HelloWorld', props: { msg: String }, data() { }, mounted() { // 创建表格 window.luckysheet.create({ container: 'mysheet' // 设定表格容器的id }); }, methods: { } }</script>

3、安装 Luckyexcel 注意:Luckyexcel 只能读取 .xlsx 格式数据,无法读取 .xls 格式数据。

npm install luckyexcel

4、完整代码

注意:若 xlsx 文件使用的是通过 wps 创建的,嵌入式的图片无法正常显示,而是显示类似 =DISPIMG(“图片 1(1)”,1) 这样的文字。原因:WPS 表格里插入的嵌入式图片是 =DISPIMG 格式( wps 特有的功能),它不是 vshape,在 shapes 集合中找不到,只能用 wps 的 et 表格打开才能看到这个图片。解决办法:在 wps 右键切换为浮动图片<template> <div class="hello"> <div id="mysheet" style="margin:0px;padding:0px;width:100%;height:100vh;"></div> </div></template><script> import LuckyExcel from 'luckyexcel' export default { name: 'about', props: { msg: String }, data() {}, mounted() { // 创建表格 // window.luckysheet.create({ // container: 'mysheet' // 设定DOM容器的id // }); // 加载 excel 文件 LuckyExcel.transformExcelToLuckyByUrl( "http://celiang.oss-cn-hangzhou.aliyuncs.com/measurement/2022-05/30/zG4ZPphpTiDPkG1653875854220530.xlsm", "", (exportJson, luckysheetfile) => { console.log(exportJson); console.log(luckysheetfile); if (exportJson.sheets == null || exportJson.sheets.length == 0) { alert("文件读取失败!"); return; } // 销毁原来的表格 window.luckysheet.destroy(); // 重新创建新表格 window.luckysheet.create({ container: 'mysheet', // 设定DOM容器的id showtoolbar: false, // 是否显示工具栏 showinfobar: false, // 是否显示顶部信息栏 showstatisticBar: false, // 是否显示底部计数栏 sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置 allowEdit: false, // 是否允许前台编辑 enableAddRow: false, // 是否允许增加行 enableAddCol: false, // 是否允许增加列 sheetFormulaBar: false, // 是否显示公式栏 enableAddBackTop: false, //返回头部按钮 data: exportJson.sheets, //表格内容 title: exportJson.info.name //表格标题 }); }); }, methods: {} }</script>

方法二、 Office Web 查看器(微软的开发接口)

直接在浏览器中打开 Word、PowerPoint 或 Excel 文件,将下载链接转换为 Office Web Viewer 链接以在您的网站或博客中使用 注意: 在 SharePoint 2019 中,可插入的文件类型仅限于 Word、Excel 和 PowerPoint (,.doc、.docx。 xls、.xlsx、.pot、.potx、.ppt 和 .pptx) 。 优点

没有 Office也可以直接查看Office 文件适用于移动端、PC无需下载文件就可以在浏览器中查看 Vue预览word,excel,pptx,pdf文件let docUrl = 'https://aaaaaa.com/file/download?filename=file.obj_id'let url = encodeURIComponent(docUrl)let officeUrl = 'http://view.officeapps.live.com/op/view.aspx?src='+url// 在新窗口打开编码后 的链接window.open(officeUrl,'_target')方法三、 XDOC文档预览云服务(预览pdf、word、xls、ppt)

XDOC文档预览云服务 注意:文档地址要用utf-8编码,并且外网可访问。 优点:

只需要传入文档URL,基于内容自动识别文档格式高效、快速、实时预览,重复请求0毫秒响应使用HTML5方式展现内容,同时适配PC端和移动端支持PDF,OFD,DOC/X,XLS/X,PPT/X,JPG,MP4等多种文档格式

调用方法

https://view.xdocin.com/view?src=文档地址

JS调用: https://view.xdocin.com/view?src=https%3A%2F%2Fview.xdocin.com%2Fdemo%2Fview.docx

【Vue实用功能】Vue实现文档在线预览功能,在线预览PDF、Word、Excel、ppt等office文件(vue使用方法)

JS调用(带水印):

window.open("https://view.xdocin.com/view?src=" + encodeURIComponent("https://view.xdocin.com/demo/view.docx") + "&watermark=" + encodeURIComponent("view.xdocin.com"));

可选参数

&pdf=true,word文档尝试以pdf方式显示,默认false

&watermark=水印文本,显示文本水印;“img:”+图片url表示图片水印,如:img:https://view.xdocin.com/demo/wm.png

&saveable=true,是否允许保存源文件,默认false

&printable=false,是否允许打印,默认true

&copyable=false,是否允许选择复制内容,默认true

&toolbar=false,是否显示底部工具条,默认true

&title=自定义标题

&expire=30,预览链接有效期,单位分钟,默认永久有效

&limit=,限制页数,如:“5”表示只显示前5页,“2,5”表示从第2页开始的5页,对pdf/doc/docx/ppt/pptx有效

&filename=文件名,辅助识别文档格式

&fontsize=字体大小(单位px),默认14,范围:6~58

&mtime=文件修改时间戳(如:1633093801,精确到秒)或修改时间(如:2021-10-01 21:10:01),值改变刷新缓存

本文链接地址:https://www.jiuchutong.com/zhishi/273293.html 转载请保留说明!

上一篇:如何修改多系统开机时选择系统的等待时间(多系统设置)

下一篇:Mac怎么屏蔽测试版更新提醒?(mac屏蔽显卡教程)

  • 抖音草稿箱的视频怎么保存到手机(抖音草稿箱的视频怎么发出去)

    抖音草稿箱的视频怎么保存到手机(抖音草稿箱的视频怎么发出去)

  • 荣耀30pro可以sd卡扩展的吗(荣耀30pro可以水下拍照吗)

    荣耀30pro可以sd卡扩展的吗(荣耀30pro可以水下拍照吗)

  • 芒果tv投屏一直连接(芒果tv投屏一直在加载中)

    芒果tv投屏一直连接(芒果tv投屏一直在加载中)

  • 电脑麦克风回音怎么消除(电脑麦克风回音解决办法)

    电脑麦克风回音怎么消除(电脑麦克风回音解决办法)

  • 钉钉群下载的文件在哪里(钉钉群下载的文件怎么编辑)

    钉钉群下载的文件在哪里(钉钉群下载的文件怎么编辑)

  • 含有ctrl的快捷方式(ctrl的所有快捷功能)

    含有ctrl的快捷方式(ctrl的所有快捷功能)

  • 抖音怎么看别人的微博(抖音怎么看别人在不在线呢?)

    抖音怎么看别人的微博(抖音怎么看别人在不在线呢?)

  • 电视一会正常一会闪屏,怎么回事(电视一会正常一会闪屏)

    电视一会正常一会闪屏,怎么回事(电视一会正常一会闪屏)

  • oppo连不上苹果11热点(oppo手机连不上iphone11的热点)

    oppo连不上苹果11热点(oppo手机连不上iphone11的热点)

  • iphone11换屏幕后显示无法验证屏幕信息(iPhone11换屏幕后没有原彩)

    iphone11换屏幕后显示无法验证屏幕信息(iPhone11换屏幕后没有原彩)

  • 微信怎么发两千的红包(微信怎么发两千字以上)

    微信怎么发两千的红包(微信怎么发两千字以上)

  • 腾讯会议不支持平板吗(腾讯会议不支持华为平板吗)

    腾讯会议不支持平板吗(腾讯会议不支持华为平板吗)

  • 小米10有没有光学防抖(小米10有没有光感功能)

    小米10有没有光学防抖(小米10有没有光感功能)

  • 苹果腾讯视频付费系统繁忙(苹果腾讯视频付费方式)

    苹果腾讯视频付费系统繁忙(苹果腾讯视频付费方式)

  • 微信被冻结手机号不是本人怎么办(微信被冻结手机店可以弄好吗)

    微信被冻结手机号不是本人怎么办(微信被冻结手机店可以弄好吗)

  • 剪贴板乱码会是中毒吗(剪贴板经常出现乱码)

    剪贴板乱码会是中毒吗(剪贴板经常出现乱码)

  • iphonexr关机后闹钟响吗(iphonexr关机后闹钟还会响吗)

    iphonexr关机后闹钟响吗(iphonexr关机后闹钟还会响吗)

  • 抖音能提现到微信吗(抖音能提现到微信吗怎么提现)

    抖音能提现到微信吗(抖音能提现到微信吗怎么提现)

  • 嘀嗒出行能打发票吗(嘀嗒能打到车吗)

    嘀嗒出行能打发票吗(嘀嗒能打到车吗)

  • iphone8支持3dtouch吗(IPhone8支持快充吗)

    iphone8支持3dtouch吗(IPhone8支持快充吗)

  • 手机qq送生日礼物怎么看(qq生日送的礼物钱去哪了)

    手机qq送生日礼物怎么看(qq生日送的礼物钱去哪了)

  • 显卡装在什么位置(显卡装在什么位置最好)

    显卡装在什么位置(显卡装在什么位置最好)

  • 文本框字体怎么居中(文本框字体怎么上下居中)

    文本框字体怎么居中(文本框字体怎么上下居中)

  • 天际通数据服务是什么意思(h3c下一页)

    天际通数据服务是什么意思(h3c下一页)

  • 华为p30微信分身怎么设置(华为mate30微信怎么分身)

    华为p30微信分身怎么设置(华为mate30微信怎么分身)

  • xr如何校准触摸(xr怎么调节触感)

    xr如何校准触摸(xr怎么调节触感)

  • 毕业论文摘要如何生成目录(毕业论文摘要模版)

    毕业论文摘要如何生成目录(毕业论文摘要模版)

  • python传递实参的方法(python中的参数传递)

    python传递实参的方法(python中的参数传递)

  • 公司车船使用税会计分录
  • 企业当期的所得税费用
  • 纳税申报流程视频教程
  • 职工薪酬如何做账
  • 购买研发设备的会计分录
  • 增值税13%税率有哪些
  • 合同资产在资产负债表中列入什么项目
  • 发票章盖金额上去了
  • 手机银行电子回单生成器
  • 横向转拨财政款应通过什么科目
  • 资产负债表试算平衡表是什么
  • 发票不附销货清单可以吗
  • 挂失申请怎么写
  • 进口汽车消费税的计算公式
  • 进口增值税已抵扣想出口
  • 印花税计税依据是销售收入吗
  • 发微信验证消息
  • 去年暂估的库存商品今年到了发票怎么做会计分录
  • 所有者权益科目编码
  • 代管商品物资登记制度
  • 物业公司前期工作计划
  • 营改增以前建筑税率
  • 物业费纳税
  • 白酒的消费税怎样计算
  • 一般纳税人花椒税率
  • 企业发放给员工子女抚养费
  • 案例分析正当防卫
  • 现金盘亏账务处理分录
  • 递延资产摊销属于什么科目
  • 金蝶kis云专业版原材料数量怎么录入
  • 结转固定资产净收益8万元
  • 预缴地实现的月销售额未超过
  • 房屋契税怎样计算公式
  • 工商年报中企业税费缴纳怎么填写
  • word表格跨页设置
  • php 数组对象
  • php中class用法
  • mrmactl.exe
  • 现金长款和短款怎么处理
  • 未确认融资费用借贷方向
  • php连接mysql数据库步骤正确的是
  • iterator用法 移除对象
  • 怎么搭建本地ota
  • 5万元买二手车能买什么价位的车
  • 中小企业发展专项资金亮点 免申即享
  • 测绘费 土地增值税
  • 库存商品暂估入库是什么意思
  • 应付账款的入账价值为未来偿还额
  • 子公司计提的盈余公积合并抵消
  • 财付通支付备付金
  • 制造费用怎么写
  • 房地产行业账务处理和主要税种
  • 通信费属于哪个会计科目
  • 销售货物并提供安装服务是混合销售吗
  • 主营业务利润率反映了企业的什么能力
  • 独立核算的生产车间是法律主体吗
  • 资产减值损失什么科目
  • 失业人员的养老金
  • 营改增后的增值税税目税率表
  • 减值损失和减值损失区别
  • mysql的知识点
  • win10隐藏设置
  • win10如何设置视频缩略图
  • 超小平板电脑
  • spysweeper.exe - spysweeper是什么进程
  • win7怎么多分出一个盘
  • windows设备管理器在哪里打开
  • win8系统怎么还原出厂设置
  • 判断输入的日期是一年中第几天
  • 命令行创建虚拟机
  • js表单事件有哪些
  • vue自定义组件v-html
  • js生成页面
  • Python的内置字典数据类型为___
  • javascript要学哪些
  • javascript怎么关
  • python批量删除行
  • 发票打印机设备设置
  • 四川省网上税务局怎么登录
  • 江西国家税务局电子税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设