Vue通过微软官方链接预览pptx docx xlsx

这篇具有很好参考价值的文章主要介绍了Vue通过微软官方链接预览pptx docx xlsx。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录:

        一、实现步骤

        二、实现效果

代码真实可用!

一、实现步骤:

1、使用的是vue和elementUI,

假设有这些变量:attachment是附件的意思


   
   
  1. data( ) {
  2. return {
  3. previewDialog: false,
  4. attachmentSrc: '',
  5. attachmentList: [{
  6. name: 'example1.docx',
  7. path: 'https://vfdgfdsgdfsgfg/attachment/example1.docx'
  8. },
  9. {
  10. name: 'example2.pdf',
  11. path: 'https://vfdgfdsgdfsgfg/attachment/example2.pdf'
  12. },
  13. {
  14. name: 'example3.txt',
  15. path: 'https://vfdgfdsgdfsgfg/attachment/example3.txt'
  16. },
  17. {
  18. name: 'example4.xlsx',
  19. path: 'https://vfdgfdsgdfsgfg/attachment/example4.xlsx'
  20. }]
  21. }
  22. }
Vue通过微软官方链接预览pptx docx xlsx,vue.js,前端,excel

2、页面代码:

主要是用 iframe 组件,src地址即为要展示的文件地址


   
   
  1. <!-- 这段代码是界面显示 -->
  2. <div v-for="attachment in attachmentList">
  3. <el-link :key="attachment.path" :href="attachment.path"
  4. style= "display: inline-block;" type= "success" :underline= "false">
  5. {{ attachment.name }}
  6. </el-link>
  7. <el-button type="text" style="display:inline-block;margin-left:30px;"
  8. icon= "el-icon-view" v-on:click= "previewFile(attachment)">
  9. 预览 </el-button>
  10. </div>
  11. <!-- 点击上面的预览按钮会弹出文件预览框 -->
  12. <el-dialog :close-on-click-modal="true" title="文件预览" type="primary"
  13. :visible.sync= "previewDialog" width= "80%" left>
  14. <iframe :src="attachmentSrc" frameborder="0" width="100%" height="600"> </iframe>
  15. <div slot="footer" class="dialog-footer">
  16. <el-button type="primary" v-on:click="previewDialog = false">关闭 </el-button>
  17. </div>
  18. </el-dialog>
Vue通过微软官方链接预览pptx docx xlsx,vue.js,前端,excel

3、methods中的函数:

word、xls、ppt这些文件要用 微软官方的预览地址

注意:1. 文件地址必须公网;2. 静态资源不要有访问权限

最后,你控制的只是src地址

微软解析地址:https://view.officeapps.live.com/op/view.aspx?src=你的文件地址


   
   
  1. methods: {
  2. // 预览文件
  3. previewFile( attachment) { // 根据文件格式显示预览内容
  4. const fileExtension = attachment. path. split( '.'). pop(). toLowerCase()
  5. if (fileExtension === 'xlsx' || fileExtension === 'docx') {
  6. this. attachmentSrc = 'https://view.officeapps.live.com/op/view.aspx?src=' + attachment. path
  7. } else{
  8. this. attachmentSrc = attachment. path
  9. }
  10. this. previewDialog = true
  11. }
  12. }



二、实现效果:

操作界面:

Vue通过微软官方链接预览pptx docx xlsx,vue.js,前端,excel

word文件预览:

Vue通过微软官方链接预览pptx docx xlsx,vue.js,前端,excel

Excel文件预览;

Vue通过微软官方链接预览pptx docx xlsx,vue.js,前端,excel

PDF文件预览:

Vue通过微软官方链接预览pptx docx xlsx,vue.js,前端,excel

 TXT文件预览:

Vue通过微软官方链接预览pptx docx xlsx,vue.js,前端,excel文章来源地址https://www.toymoban.com/news/detail-665687.html

目录:

        一、实现步骤

        二、实现效果

代码真实可用!

一、实现步骤:

1、使用的是vue和elementUI,

假设有这些变量:attachment是附件的意思


   
   
  1. data( ) {
  2. return {
  3. previewDialog: false,
  4. attachmentSrc: '',
  5. attachmentList: [{
  6. name: 'example1.docx',
  7. path: 'https://vfdgfdsgdfsgfg/attachment/example1.docx'
  8. },
  9. {
  10. name: 'example2.pdf',
  11. path: 'https://vfdgfdsgdfsgfg/attachment/example2.pdf'
  12. },
  13. {
  14. name: 'example3.txt',
  15. path: 'https://vfdgfdsgdfsgfg/attachment/example3.txt'
  16. },
  17. {
  18. name: 'example4.xlsx',
  19. path: 'https://vfdgfdsgdfsgfg/attachment/example4.xlsx'
  20. }]
  21. }
  22. }
Vue通过微软官方链接预览pptx docx xlsx,vue.js,前端,excel

2、页面代码:

主要是用 iframe 组件,src地址即为要展示的文件地址


   
   
  1. <!-- 这段代码是界面显示 -->
  2. <div v-for="attachment in attachmentList">
  3. <el-link :key="attachment.path" :href="attachment.path"
  4. style= "display: inline-block;" type= "success" :underline= "false">
  5. {{ attachment.name }}
  6. </el-link>
  7. <el-button type="text" style="display:inline-block;margin-left:30px;"
  8. icon= "el-icon-view" v-on:click= "previewFile(attachment)">
  9. 预览 </el-button>
  10. </div>
  11. <!-- 点击上面的预览按钮会弹出文件预览框 -->
  12. <el-dialog :close-on-click-modal="true" title="文件预览" type="primary"
  13. :visible.sync= "previewDialog" width= "80%" left>
  14. <iframe :src="attachmentSrc" frameborder="0" width="100%" height="600"> </iframe>
  15. <div slot="footer" class="dialog-footer">
  16. <el-button type="primary" v-on:click="previewDialog = false">关闭 </el-button>
  17. </div>
  18. </el-dialog>
Vue通过微软官方链接预览pptx docx xlsx,vue.js,前端,excel

3、methods中的函数:

word、xls、ppt这些文件要用 微软官方的预览地址

注意:1. 文件地址必须公网;2. 静态资源不要有访问权限

最后,你控制的只是src地址

微软解析地址:https://view.officeapps.live.com/op/view.aspx?src=你的文件地址


   
   
  1. methods: {
  2. // 预览文件
  3. previewFile( attachment) { // 根据文件格式显示预览内容
  4. const fileExtension = attachment. path. split( '.'). pop(). toLowerCase()
  5. if (fileExtension === 'xlsx' || fileExtension === 'docx') {
  6. this. attachmentSrc = 'https://view.officeapps.live.com/op/view.aspx?src=' + attachment. path
  7. } else{
  8. this. attachmentSrc = attachment. path
  9. }
  10. this. previewDialog = true
  11. }
  12. }



二、实现效果:

操作界面:

Vue通过微软官方链接预览pptx docx xlsx,vue.js,前端,excel

word文件预览:

Vue通过微软官方链接预览pptx docx xlsx,vue.js,前端,excel

Excel文件预览;

Vue通过微软官方链接预览pptx docx xlsx,vue.js,前端,excel

PDF文件预览:

Vue通过微软官方链接预览pptx docx xlsx,vue.js,前端,excel

 TXT文件预览:

Vue通过微软官方链接预览pptx docx xlsx,vue.js,前端,excel

到了这里,关于Vue通过微软官方链接预览pptx docx xlsx的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uniapp 在线预览各种格式文件(支持doc, xls, ppt, pdf, docx, xlsx, pptx格式) 适用于小程序 (解决了真机调试可以打开,发布体验版打不开的问题)(可设置文件名)

    代码: 参考官方文档: uni.saveFile(OBJECT) @savefile | uni-app官网 uni-app,uniCloud,serverless https://uniapp.dcloud.net.cn/api/file/file.html#opendocument tips: 问题一: 打不开         1. 文件地址须保证能正常打开(在浏览器中尝试是否能预览或正常下载)         2.注意文件名最好为数字字母(非中文) 问题

    2024年02月05日
    浏览(61)
  • vue预览docx

            预览文件的数据流从服务器的接口传入: 1. 安装插件 yarn add xlsx 2.引入插件         import XLSX from \\\"xlsx\\\"  // 早期版本的引入方式         import * as XLSX from \\\'xlsx/xlsx.mjs\\\' //  为了适应新版本xlsx的引入方式 3.  html中实现多sheet的切换,并将数据显示到div

    2024年02月09日
    浏览(28)
  • Visual Studio中C++部分的官方文档链接【微软(Microsoft)所有产品的官方文档链接】

    目前(2022年07月),微软官方网站上关于Visual Studio的文档,最老的版本也是VS2015了,如下图所示: 微软所有产品的文档目录: 中文版:https://docs.microsoft.com/zh-CN/documentation/ 英文版:https://docs.microsoft.com/en-us/documentation/ Visual Studio中C++部分的官方文档: 中文版:https://docs.microso

    2024年02月07日
    浏览(65)
  • vue + vue-office 实现多种文件(docx、excel、pdf)的预览

    支持多种文件( docx、excel、pdf )预览的vue组件库,支持vue2/3。也支持非Vue框架的预览。 github: 《仓库地址》 演  示: 《演示效果》 一站式:提供docx、pdf、excel多种文档的在线预览方案,有它就够了 简单:只需提供文档的src(网络地址)即可完成文档预览 体验好:选择每个文档

    2024年02月12日
    浏览(39)
  • WPS右键新建没有docx pptx xlsx 修复

    右键没有新建PPT和Excel 以上不管咋修复都没用 CTRL+F搜文件扩展名 pptx docx xlsx 新建字符串 FileName 值为安装目录下面的模板文件路径 例如 “C:Program Files (x86)KingsoftWPS Office11.8.2.12085office6muidefaulttemplatesnewfile.xlsx” ![]三种扩展名都一样操作 注册组件,之后右键就有了 2024年

    2024年02月11日
    浏览(45)
  • vue - - - - - 在线预览常见文件格式 .doc, .docx, .xls, .xlsx,.pdf

    关于一些文件的在线预览,最简易的实现方式是什么呢? 写在前面 .png, .jpg, .jpeg 等图片格式 直接预览http/https地址 即可 .pdf 文件 直接预览http/https地址 即可 .doc, .docx, .xls, .xlsx 等类型文件,需要在预览地址之前拼接上 https://view.officeapps.live.com/op/view.aspx?src= .ofd 等类型文件,需

    2024年02月09日
    浏览(74)
  • vue-office 支持多种文件(docx、excel、pdf)预览的vue组件库

    https://gitcode.com/mirrors/501351981/vue-office/overview?utm_source=csdn_github_acceleratorisLogin=1 文档预览场景大致可以分为两种: 有文档网络地址,比如 https://***.docx 文件上传时预览,此时可以获取文件的ArrayBuffer或Blob .docx文件预览 使用网络地址预览 上传文件预览 读取文件的ArrayBuffer 二进制

    2024年02月01日
    浏览(56)
  • python读取pdf、doc、docx、ppt、pptx文件内容

    使用python读取文件,其中pdf、docx、pptx可以直接读,.ppt和.doc文件不能直接读,需要转换成.pptx和.docx文件,并且需要区分系统 如果是linux系统,请先安装组件 python代码如下:

    2024年02月11日
    浏览(48)
  • 通过微软官方工具卸载office

    经常遇到有些电脑上安装了office 2007、office 2010、或者office 2013无法卸载的情况,一般这种情况出现在一些第三方修改的ghost系统中,在控制面板和安装目录下均找不到卸载项。这时候就要借助微软官方工具进行彻底卸载。 https://support.microsoft.com/zh-cn/office/%e4%bb%8e-pc-%e5%8d%b8%e8%

    2024年02月11日
    浏览(46)
  • vue项目用后端返回的文件流实现docx和pdf文件预览

    写这篇文章的目的,是因为我比较懒,想把代码记录一下,方便日后使用;哈哈,如果你也需要,也可以复制粘贴啊,为了方便自己和需要的人知道怎么使用,我尽量写的详细一点,没有什么技术难点,就是简单的记录,万一能帮到需要的人呢,也是一件美事; 其实也就是使

    2023年04月20日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包