如何使用 Flutter Web 在浏览器中打开下载的文件？

Question

我有一个下载文件的功能，但由于没有像Android/iOS中那样的临时目录，我不知道如何将文件保存在内存中并在新的浏览器选项卡中打开它。该文件必须先下载，并且不能直接通过 url 访问，因为必须在 http 调用中使用带有身份验证令牌的标头才能访问文件。 这是我的下载功能，适用于 Android 和 iOS，并且仅下载 Flutter Web 中的文件：

  Future<XFile?> download({required String path, Map<String, dynamic>? queryParams}) async {
    Options options = generateOptions(await generateToken(), responseType: ResponseType.bytes);
    Map<String, String> headers = {};
    options.headers?.forEach((key, value) {
      headers[key] = '$value';
    });
    try {
      var response = await http.get(
        Uri.parse(path),
        headers: headers,
      );
      String mimeType = response.headers['content-type'] ?? '';
      String fileName = response.headers['content-disposition'] ?? 'File';
      String filePath = '${kIsWeb == true ? fileName : (await getTemporaryDirectory()).path}/$fileName';
      XFile file = XFile.fromData(
        response.bodyBytes,
        mimeType: mimeType,
        name: fileName,
        path: filePath,
      );
      if (!kIsWeb) {
        await File(filePath).create(recursive: true);
        await File(filePath).writeAsBytes(await file.readAsBytes());
      } else {
        await WebDownloader.downloadBase64(base64data: base64Encode(response.bodyBytes), filename: fileName);
      }
      return file;
    } catch (e) {
      errorManagement(e);
    }
  }

创建实例后如何打开下载的文件？

Answer 1

下载完成后，使用

file.readAsBytes()

以字节形式读取下载文件的内容。然后，使用

Url.createObjectUrlFromBlob(blob)

从字节数据创建 Blob URL，其中 Blob 是使用下载的字节及其 MIME 类型创建的。最后，在 web 视图中打开 blob URL。以下是在 web 视图中将文件显示为 blob 的示例方法-

Future<void> openDownloadedFileInWebView(XFile file) async {
  final bytes = await file.readAsBytes();
  final blob = Blob([bytes], mimeType: file.mimeType);
  final url = Url.createObjectUrlFromBlob(blob);

  // Update WebView's initialUrl with the Blob URL
  setState(() {
    webView.initialUrl = url;
  });
}