Question

我正在使用一些Windows本机组件在React Native中开发一个应用程序。其中一个组件是WebView。

我通过此WebView显示网站，此网站会记录相机视频并提示用户下载文件（该文件是从Blob和URL.createObjectURL(blob)创建的文件）。但是，WebView不会打开任何文件夹选择器或文件选择器，并且用户无法保存该文件。

这是我的WebView代码（记住它有一些React Native的属性）：

using ReactNative.UIManager;
using ReactNative.UIManager.Annotations;
using System;
using System.Reflection;
using Windows.UI.Xaml.Controls;

namespace ListProject.CustomModules
{
    public class PremissionWebviewViewManager : SimpleViewManager<WebView>
    {
        private Uri sourceUri;
        private WebView thiswv;

        public override string Name
        {
            get
            {
                return "PermissionWebviewViewManager";
            }
        }

        [ReactProp("sourceUri")]
        public void SetSource(WebView view, String source)
        {
            this.sourceUri = new Uri(source);
            thiswv.Navigate(this.sourceUri);
        }

        protected override WebView CreateViewInstance(ThemedReactContext reactContext)
        {
            thiswv = new WebView();
            thiswv.PermissionRequested += HandlePermissionRequested;
            // thiswv.UnviewableContentIdentified += HandleDownloadContent; <--- I thought this could help, but I came up with nothing

            return thiswv;
        }

        private void HandlePermissionRequested(WebView sender, WebViewPermissionRequestedEventArgs args)
        {
            args.PermissionRequest.Allow();
        }

        private void HandleDownloadContent(WebView sender, WebViewUnviewableContentIdentifiedEventArgs args)
        {
            // Windows.System.Launcher.LaunchUriAsync(args.Uri);
        }
    }
}

这是React Native组件：

render() {
    return (
        <PermissionWebview 
            style={{flex: 1}}
            mediaPlaybackRequiresUserAction={false}
            domStorageEnabled={true}
            allowsInlineMediaPlayback={true}
            source={{uri: this.website}} 
            sourceUri={this.website} 
            allowFileAccessFromFileURLs={true}
            allowUniversalAccessFromFileURLs={true}
        />
    );
}

在这里，JS在网站部分使用的脚本触发下载：

var blob = new Blob(recordedVideo, {type: 'video/webm'});
var videoUrl = URL.createObjectURL(blob);

var anchorTag = $('<a class="download_link"></a>');
anchorTag.attr('href', videoUrl);
anchorTag.attr('target', '_blank');
anchorTag.attr('download', 'video.webm');

// Add the anchor tag to DOM
$('body').append(anchorTag);

// We use DOM element and not JQ element to trigger DOM events (not JQ ones)
anchorTag[0].click();

// Remove tag once clicked and event triggered
anchorTag.remove();

Windows应用程序具有在清单中授予的所有文件功能（尽管不要求用户让应用程序访问文件系统），并且在本机Edge浏览器中它可以工作 - 因此它不是Edge API限制（WebView在UWP W10中使用Edge引擎）。

如何实现触发下载窗口并将文件下载到客户端？

谢谢。

UWP Webview - 如何下载用Javascript生成的文件

0 个答案: