Vue实现文档在线预览

一、 Office Web Viewer(微软)

说明1  说明1

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

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

url直接查看:
let docUrl = 'https://view.xdocin.com/demo/view.docx';
let url = encodeURIComponent(docUrl);
let officeUrl = 'http://view.officeapps.live.com/op/view.aspx?src='+url;
window.open(officeUrl,'_target');

excel查看可选参数:
ActiveCell='Sheet1'!A1 // 默认选中单元格(url编码后的)
嵌入式查看:
<iframe src="http://116.62.207.35:7000/view/1475991719039856642"         
  style="width:100%;height:100%;" frameborder="0"></iframe>

excel查看可选参数:
ActiveCell='Sheet1'!A1 // 默认选中单元格(url编码后的)
wdHideGridlines=True // 隐藏网格线(有参数即为true)
wdHideHeaders=True // 隐藏行和列标题(有参数即为true)
wdDownloadButton=True // 包含一个下载链接(有参数即为true)
wdAllowInteractivity=True // 可以进行筛选和排序(有参数即为true)
AllowTyping=True // 可以在单元格中键入内容(不会保存所做的更改 有参数即为true)

二、阿里云IMM

接入文档

结合对象存储(OSS)使用,提供文档的格式转换及预览等功能

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

(免费10天试用)

XDOC文档预览云服务

优点:

  1. 只需要传入文档URL,基于内容自动识别文档格式
  2. 高效、快速、实时预览,重复请求0毫秒响应
  3. 适用于PC端和移动端
  4. 支持PDF,OFD,DOC/X,XLS/X,PPT/X,JPG,MP4等多种文档格式
let docUrl = 'https://view.xdocin.com/demo/view.docx';
let name = '荷塘月色';
let url = encodeURIComponent(docUrl);
let officeUrl = 'http://view.xdocin.com/view?src='+url+'&title='+name;
window.open(officeUrl)

可选参数

参数默认值说明
pdffalseword文档尝试以pdf方式显示
watermark显示文本水印。如:img:https://view.xdocin.com/demo/wm.png
saveablefalse是否允许保存源文件
printabletrue是否允许打印
abletrue是否允许选择复制内容
toolbartrue是否显示底部工具条
title自定义文档标题
expire预览链接有效期,单位分钟,默认永久有效
limit限制页数。如:“5”表示只显示前5页,“2,5”表示从第2页开始的5页,对pdf/doc/docx/ppt/pptx有效
filename文件名,辅助识别文档格式
fontsize14字体大小(单位px)。范围:6~58
mtime文件修改时间戳或修改时间,值改变刷新缓存

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue2中实现在线预览Word文档的方法如下: 1. 首先,你需要调取接口获取后端传回的Word文档流。这可以通过调用接口的方法来完成,接口返回的文档流通常存储在res.data.data中。你可以使用axios或其他HTTP请求库来发送请求并接收响应。 2. 在Vue模板中,你可以创建一个按钮,通过点击按钮来触发预览Word文档的操作。按钮可以使用Element UI库的el-button组件或其他自定义的按钮组件。在按钮的点击事件处理函数中,调用接口方法并将返回的文档流作为参数传递给渲染函数。 3. 在Vue组件中引入docx-preview库,并使用其提供的renderAsync方法来渲染Word文档。你可以在组件的script标签中通过require语法引入docx-preview库,并在方法中使用docxx.renderAsync方法来渲染文档。渲染函数需要传递两个参数,第一个参数是接口返回的文档流,第二个参数是一个DOM元素的引用,用于指定渲染文档的位置。 下面是一个示例代码,演示了如何在Vue2中实现在线预览Word文档: ```html <template> <div> <el-button @click="previewWord">预览Word文档</el-button> <div ref="wordContainer"></div> </div> </template> <script> import { getWordDocument } from "@/api/documents"; var docxx = require("docx-preview"); export default { methods: { previewWord() { getWordDocument() // 调用接口获取文档流 .then((res) => { docxx.renderAsync(res.data.data, this.$refs.wordContainer); }) .catch((error) => { this.$message.error(error); }); }, }, }; </script> ``` 请注意,上述示例代码中的getWordDocument方法是一个示例接口调用方法,你需要根据实际情况替换为适用于你的项目的接口调用方法。此外,你还需要根据实际情况对代码进行调整和修改。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue实现预览word文档(处理文档流)](https://blog.csdn.net/weixin_45294459/article/details/126997364)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [vue实现pdf文档在线预览功能](https://download.csdn.net/download/weixin_38590784/13681693)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值