uno-platform - 你如何将文件交给用户？

Question

在#WASM/#UNO-platform 项目中，如何将文件交给用户？

在我的例子中，我在本地生成一个 PDF，必须下载它或在浏览器中显示它。

有什么线索吗？
问候， 迈克尔

Answer 1

目前还没有 API 可以直接做到这一点。但是你可以创建一个 data: anchor ( a) HTML 元素上的 url。

为此，您需要创建一些 JavaScript。方法如下:

IMPORTANT: following code will only work with very recent version of Uno.UI. Version starting with v3.0.0-dev.949+

为 <a> 创建一个 ContentControl标签

[HtmlElement("a")]
public partial class WasmDownload : ContentControl
{
    public static readonly DependencyProperty MimeTypeProperty = DependencyProperty.Register(
        "MimeType", typeof(string), typeof(WasmDownload), new PropertyMetadata("application/octet-stream", OnChanged));

    public string MimeType
    {
        get => (string) GetValue(MimeTypeProperty);
        set => SetValue(MimeTypeProperty, value);
    }

    public static readonly DependencyProperty FileNameProperty = DependencyProperty.Register(
        "FileName", typeof(string), typeof(WasmDownload), new PropertyMetadata("filename.bin", OnChanged));

    public string FileName
    {
        get => (string) GetValue(FileNameProperty);
        set => SetValue(FileNameProperty, value);
    }

    private Memory<byte> _content;

    public void SetContent(Memory<byte> content)
    {
        _content = content;
        Update();
    }

    private static void OnChanged(DependencyObject dependencyobject, DependencyPropertyChangedEventArgs args)
    {
        if (dependencyobject is WasmDownload wd)
        {
            wd.Update();
        }
    }

    private void Update()
    {
        if (_content.Length == 0)
        {
            this.ClearHtmlAttribute("href");
        }
        else
        {
            var base64 = Convert.ToBase64String(_content.ToArray());
            var dataUrl = $"data:{MimeType};base64,{base64}";
            this.SetHtmlAttribute("href", dataUrl);
            this.SetHtmlAttribute("download", FileName);
        }
    }
}

在您的 XAML 页面中使用它

<myControls:WasmDownload FileName="test.txt" x:Name="download">
    Click here to download
</myControls:WasmDownload>

请注意，与任何其他 XAML ContentControl 一样，您可以将任何内容放入控件的内容中。

在代码隐藏中设置文件内容

Loaded += (sender, e) =>
{
    download.MimeType = "text/plain";

    var bytes = Encoding.UTF8.GetBytes("this is the content");
    download.SetContent(bytes);
};

结果

Uno 的直接支持

有一个PR #3380为所有平台原生地将此功能添加到 Uno。您也可以等待它，而不是采用自定义方式。

FileSavePicker 的 PR已合并，该功能现已在包 Uno.UI 中可用自版本3.0.0-dev.1353 .