当前位置: 首页 > news >正文

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

1、Office Web(微软的开发接口)

优点

  1. 没有 Office也可以直接查看Office 文件
  2. 适用于移动端、PC
  3. 无需下载文件就可以在浏览器中查看

<iframe src="文档地址"  frameborder="0" />

const docUrl = '外网可预览的地址'
const url = encodeURIComponent(docUrl)
const officeUrl = 'http://view.officeapps.live.com/op/view.aspx?src=' + url
// 在新窗口打开编码后 的链接
window.open(officeUrl, '_target')const documentUrl = '' // 将此替换为你的Word文档的URL
const officeOnlineViewerUrl = 'https://view.officeapps.live.com/op/view.aspx?src='
// 第一种
// this.previewUrl = officeOnlineViewerUrl + encodeURIComponent(documentUrl)// 第二种
// this.previewUrl = `${officeOnlineViewerUrl}${documentUrl}&embedded=true`

// 没有下载按钮的--https://view.officeapps.live.com/op/embed.aspx?src=

// 有下载按钮的--https://view.officeapps.live.com/op/view.aspx?src=

2、XDOC文档预览云服务(预览pdf、word、xls、ppt) 

 XDOC文档预览云服务

 注意:文档地址要用utf-8编码,并且外网可访问。

优点:

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

调用方法

https://view.xdocin.com/view?src=文档地址(https://)eg:
const url = 'https://view.xdocin.com/view?src=文档地址【https(http)://】可预览的地址'

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

 可选参数

  1. &pdf=true,word文档尝试以pdf方式显示,默认false
  2. &watermark=水印文本,显示文本水印;“img:”+图片url表示图片水印,如:img:https://view.xdocin.com/demo/wm.png
  3. &saveable=true,是否允许保存源文件,默认false
  4. &printable=false,是否允许打印,默认true
  5. ©able=false,是否允许选择复制内容,默认true
  6. &toolbar=false,是否显示底部工具条,默认true
  7. &title=自定义标题
  8. &expire=30,预览链接有效期,单位分钟,默认永久有效
  9. &limit=,限制页数,如:“5”表示只显示前5页,“2,5”表示从第2页开始的5页,对pdf/doc/docx/ppt/pptx有效
  10. &filename=文件名,辅助识别文档格式
  11. &fontsize=字体大小(单位px),默认14,范围:6~58
  12. &mtime=文件修改时间戳(如:1633093801,精确到秒)或修改时间(如:2021-10-01 21:10:01),值改变刷新缓存

 

<template><iframe:src="xsrc"frameborder="0"scrolling="auto"style="width:100%;height:100%;"></iframe>
</template><script>
export default {name: 'XdocView',data () {return {xsrc: ''}},props: {src: String,watermark: String},watch: {src: {handler (val) {this.genXsrc()},immediate: true},watermark: {handler (val) {this.genXsrc()},immediate: true}},methods: {genXsrc () {if (this.src) {// 你的文档地址const file = this.src// XDOC文档预览服务地址let xurl = 'https://view.xdocin.com/view?src='// 传入文档地址xurl += encodeURIComponent(file)// 预览参数const ops = {watermark: this.watermark,// pdf: true, // word文档尝试以pdf方式显示,默认false// img: true, // 尝试以图片方式显示,默认false// "saveable": true, //是否允许保存源文件,默认falseprintable: false // 是否允许打印,默认true// "copyable": false, //是否允许选择复制内容,默认true// toolbar: false // 是否显示底部工具条,默认true// "expire": 30, //预览链接有效期,单位分钟,默认永久有效// "limit": "1,3", //限制页数,如:“5”表示只显示前5页,“2,5”表示从第2页开始的5页,对pdf/doc/docx/ppt/pptx有效// "mtime": 1633093801, //文件修改时间戳(精确到秒)或修改时间(如:2021-10-01 21:10:01),值改变刷新缓存,实时预览}// 传入预览参数for (const a in ops) {if (ops[a] != undefined) {xurl += '&' + a + '=' + encodeURIComponent(ops[a])}}// 开始预览this.xsrc = xurl}}}
}
</script><style></style>

相关文章:

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

1、Office Web(微软的开发接口) 优点 没有 Office也可以直接查看Office 文件适用于移动端、PC无需下载文件就可以在浏览器中查看 <iframe src"文档地址" frameborder"0" /> const docUrl 外网可预览的地址 const url encodeURIComponent(docUrl…...

【一站解决您的问题】mac 利用命令升级nodejs、npm、安装Nodejs的多版本管理器n、nodejs下载地址

一&#xff1a;下载nodejs 官网地址&#xff0c;点击下载稳定版 https://nodejs.org/en 如果官网下载特别慢&#xff0c;可以点击这个地址下载 点击这里 https://nodejs.cn/download/current/ 安装完成后&#xff0c;就包含了nodejs 和 npm。此时您的版本就是下载安装的版本…...

【RabbitMQ】死信(延迟队列)的使用

目录 一、介绍 1、什么是死信队列(延迟队列) 2、应用场景 3、死信队列(延迟队列)的使用 4、死信消息来源 二、案例实践 1、案例一 2、案例二&#xff08;消息接收确认 &#xff09; 3、总结 一、介绍 1、什么是死信队列(延迟队列) 死信&#xff0c;在官网中对应的单词…...

java 解析word模板(2024-01-25)

本文主要功能是解析word模板 这是一个word解析类&#xff0c;因为我做的系统用到了而且没有可用的帮助类&#xff0c;只能自己写。之前的实现方式是freemarker 模板解析。但是这次要求用poi不在使用freemarker。实现功能比较少&#xff0c;主要是满足开发需求即可&#xff0c;没…...

flutter-相关个人记录

1、flutter 安卓打包打包报错 flutter build apk -v --no-tree-shake-icons 2、获取华为指纹证书命令 keytool -list -v -keystore ***.jks 3、IOS项目中私有方法查找隐藏文件中 1、cd 项目目录地址 2、grep -r xerbla. "xerbla"为需要查找的关键字 3…...

互斥锁/读写锁(Linux)

一、互斥锁 临界资源概念&#xff1a; 不能同时访问的资源&#xff0c;比如写文件&#xff0c;只能由一个线程写&#xff0c;同时写会写乱。 比如外设打印机&#xff0c;打印的时候只能由一个程序使用。 外设基本上都是不能共享的资源。 生活中比如卫生间&#xff0c;同一…...

Jackson序列化Bean额外属性附加--@JsonAnyGetter、@JsonUnwrapped用户

1. 场景 有一项工作&#xff0c;需要将数据从一个服务S中读取出来&#xff08;得到的是一个JSON&#xff09;&#xff0c;将数据解析转换以后构造成一个数组的类型A的对象&#xff0c;写入到一个服务T中。 A.class Data public class A {String f0 ;String f1 ; }在发现需要…...

排序算法——冒泡排序算法详解

冒泡排序算法详解 1.引言2.算法概览2.1输入处理2.2核心算法步骤2.3数据结构2.4复杂度分析 3.算法优化4.边界条件和异常处理5.实验和测试6.应用和扩展7.代码示例8.总结 1.引言 冒泡排序是一种简单而直观的比较排序算法&#xff0c;它通过多次遍历数组&#xff0c;比较相邻元素并…...

宋仕强论道之华强北的缺货潮(十六)

始于2019年缺货潮让华强北又生产一大批亿万富翁&#xff0c;缺货的原因主要是&#xff1a;首先&#xff0c;疫情封控导致大量白领在家远程办公&#xff0c;需要购买电脑、打印机等办公设备&#xff0c;同时孩子们也要在家上网课&#xff0c;进一步增加对电子智能终端产品的需求…...

登录注册页面

前提&#xff1a;基于element-ui环境 模态登录组件 分析Login.vue <template><div class"login"><span click"handleClose">X</span></div> </template><script> export default {name: "Login",m…...

视频美颜SDK详解:动态贴纸技术的前沿探索

当下&#xff0c;美颜SDK的动态贴纸技术作为视频美颜的独特亮点&#xff0c;吸引了越来越多开发者和用户的关注。 一、技术详解 动态贴纸技术是视频美颜SDK中的一项创新性功能&#xff0c;它通过在实时视频中添加各种动态效果&#xff0c;为用户提供更加生动有趣的拍摄体验。…...

vue3 实现上传图片裁剪

在线的例子以及代码&#xff0c;请点击访问链接...

flink1.18 广播流 The Broadcast State Pattern 官方案例scala版本

对应官网 https://nightlies.apache.org/flink/flink-docs-master/docs/dev/datastream/fault-tolerance/broadcast_state/ 测试数据 * 广播流 官方案例 scala版本* 广播状态* https://nightlies.apache.org/flink/flink-docs-master/docs/dev/datastream/fault-tolerance…...

vueRouter中scrollBehavior实现滚动固定位置

使用前端路由&#xff0c;当切换到新路由时&#xff0c;想要页面滚到顶部&#xff0c;或者是保持原先的滚动位置&#xff0c;就像重新加载页面那样。 vue-router 能做到&#xff0c;而且更好&#xff0c;它让你可以自定义路由切换时页面如何滚动。 注意: 这个功能只在 HTML5 h…...

解决WinForms跨线程操作控件的问题

解决WinForms跨线程操作控件的问题 介绍 在构建Windows窗体应用程序时&#xff0c;我们通常会遇到需要从非UI线程更新UI元素的场景。由于WinForms控件并不是线程安全的&#xff0c;直接这样做会抛出一个异常&#xff1a;“控件’control name’是从其他线程创建的&#xff0c;…...

从零开始:Git 上传与使用指南

Git 是一种非常强大的版本控制系统&#xff0c;它可以帮助您在多人协作开发项目中更好地管理代码版本&#xff0c;并确保每个团队成员都能及时地获取最新的代码更改。在使用 Git 进行版本控制之前&#xff0c;您需要先进行一些设置&#xff0c;以确保您的代码能够顺利地与远程仓…...

Docker compose部署Golang服务

Docker Compose 部署 在使用docker部署时&#xff0c;除了使用--link的方式来关联容器之外&#xff0c;还可以使用 docker compose 运行多个容器。 本文以项目&#xff1a;https://github.com/johncxf/go-api 为例。 定义 Dockerfile 我这里用于区分默认 Dockerfile 文件&a…...

Day36 435无重叠区间 763划分字母区间

435 无重叠区间 给定一个区间的集合&#xff0c;找到需要移除区间的最小数量&#xff0c;使剩余区间互不重叠。 注意: 可以认为区间的终点总是大于它的起点。 区间 [1,2] 和 [2,3] 的边界相互“接触”&#xff0c;但没有相互重叠。 本题与上一题类似&#xff1a; 如果按照左…...

【Servlet】如何编写第一个Servlet程序

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【Servlet】 本专栏旨在分享学习Servlet的一点学习心得&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; Servlet是Java编写的服务器端…...

读懂比特币—bitcoin代码分析(五)

今天的代码分析主要是 bitcoin/src/init.cpp 文件中的三个函数&#xff1a;AppInitSanityChecks、AppInitLockDataDirectory、AppInitInterfaces&#xff0c;下面我们来说明这三个函数是用来干什么的&#xff0c;并逐行解读函数代码&#xff0c;先贴出源代码如下&#xff1a; …...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

网络六边形受到攻击

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 抽象 现代智能交通系统 &#xff08;ITS&#xff09; 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 &#xff08;…...

css实现圆环展示百分比,根据值动态展示所占比例

代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

爬虫基础学习day2

# 爬虫设计领域 工商&#xff1a;企查查、天眼查短视频&#xff1a;抖音、快手、西瓜 ---> 飞瓜电商&#xff1a;京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空&#xff1a;抓取所有航空公司价格 ---> 去哪儿自媒体&#xff1a;采集自媒体数据进…...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...