-
MASA MAUI 预览Office文件
背景
接到一个在Maui中预览Office文件的需求，包含excel、word、PDF三种常见的文件，经过技术选型，最后选择了微软原生支持的office在线预览Api，原因是此技术方案简单、跨平台。在开发过程中碰到了不少问题，所以在此分享在MAUI中预览Offic文件的经验，也希望大家少踩坑。
介绍
微软提供了一个浏览器在线预览Office的Api：在线预览Office文件Api，拼接自己的office文件地址参数后在浏览器中访问即可达到预览效果。
https://view.officeapps.live.com/op/view.aspx?src={your_office_url}
接下来我们按照这个思路在Maui中实现这个效果。
1、新建MAUI Blazor项目
OfficeViewerDemo
2、创建OfficeViewer.razor组件
在Index.razor页面写上demo视图
@code { [Parameter] [EditorRequired] public string Url { get; set; } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
@page "/"@code{ string _url = "your_excel_url"; } - 1
- 2
- 3
- 4
- 5
- 6
- 7
3、使用安卓模拟器运行
看似大功告成了，满心欢喜，然而在尝试浏览word文件时发现异常，无法正常访问
通过用浏览器模拟移动设备调试后，发现微软这个Api会检测设备，这个Api在移动端下不适用。经过在网络上一番查找，最后发现微软有一个移动端设备使用的Api：在线预览Office文件Api，我们将OfficeViewer.razor组件代码中的Api替换后运行
https://view.officeapps.live.com/op/embed.aspx?src=={your_office_url}
@code { [Parameter] [EditorRequired] public string Url { get; set; } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
一切似乎完美，然而现实很残酷，在打包给测试后，发现Iphone进入此页面会出现跳转浏览器的现象，在网上查阅资料后得知，这是苹果的安全策略，就是不允许App里直接使用iframe。最后尝试在webview中使用iframe，解决了此问题。
4、兼容iOS
关于MAUI WebView的内容请参考下面官方文档
https://learn.microsoft.com/zh-cn/dotnet/maui/user-interface/controls/webview?pivots=devices-ios
新建WebViewer.xaml文件，使用WebView组件
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="OfficeViewrDemo.WebViewer" Title="WebViewer"> <StackLayout> <WebView x:Name="webView" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand"> WebView> StackLayout> ContentPage>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
namespace OfficeViewrDemo; public partial class WebViewer : ContentPage { public WebViewer() { InitializeComponent(); } public void Open(string url) { this.webView.Source = url; } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
修改OfficeViewer.razor组件代码
@code { [Parameter] [EditorRequired] public string Url { get; set; } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { WebViewer webView = new WebViewer(); webView.Open($"https://view.officeapps.live.com/op/embed.aspx?src={Url}"); await Microsoft.Maui.Controls.Application.Current.MainPage.Navigation.PushModalAsync(webView); } } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
如此这般就兼容解决了iOS。
总结
本文主要介绍了如何在Maui下预览Office文件，并分享开发过程正踩过的坑以及对应的解决方案。希望能帮助到遇到同样需求问题的朋友。
-
相关阅读:
二面头条、三面拼多多、五面蚂蚁分享面经总结，助你拿大厂offer
Geoserver中使用CQL过滤要素
【图像分割】基于matlab萤火虫算法图像聚类分割【含Matlab源码 2106期】
【Vue基础】Vue快速上手
大家怎么看清华学院的“后羿射日”雕塑
基于无人机倾斜摄影模型提取高精度地形DEM数据
初步读懂linux内核结构
ArrayList与LinkedList区别
软件考试学习笔记（希赛）
【axios】axios下载二进制excel文件如何做到中断续传
- 原文地址：https://blog.csdn.net/MASAteam/article/details/133854485
- 最新文章
-
沪漂五周年了：我越来越迷茫了
Agentic Skill Routing 实战：别再把所有 Skill 塞进 AI Agent 上下文
MySQL-Seconds_behind_master的精度误差
[MAF预定义ChatClient中间件-03]CachingChatClient——利用缓存省钱省时间
AI的至暗历史：从万众期待到被政府撤资，AI的两次死亡徘徊
Agent OS ：五种驯服不确定性的范式
PortSwigger SQL注入LAB11
数据库即时编译JIT
[Begin]AI Learn Data Day 0
深度学习进阶（二十七）现代 LLM 的核心架构设计其二：SwiGLU