How to convert a string to a blob using universal_html plugin in Flutter web

1.3k Views Asked by At

I am trying to show a Google Drive file using Flutter web app. At this stage the best I can do is open a pdf url in browser. I am able to get a blob string from a Google Drive file using Google Apps Script in Flutter web but when I am using universal_html plugin to open pdf, I can't convert string to blob object and Flutter project throws an error in console as below when showing blob.

Problem: How to convert blob string from Google Apps script to Blob object that can be used in html.Url.createObjectUrlFromBlob(blob); ?

Step1: Set up Google Apps Script project.

function doGet(){
  var blobText = getFileAsBlob("1wzR-7fWT_vA7jVSUnDwSj28j82scazkkup8Ovr9kwjv");
  return ContentService.createTextOutput(blobText).setMimeType(ContentService.MimeType.JSON);
  //return HtmlService.createHtmlOutput(blobText);
}

//Return file as blob by Id
function getFileAsBlob(fileId) {
  var file = DriveApp.getFileById(fileId);
  var blob = file.getBlob().getDataAsString();
  return blob;
}

Step2: Set up Flutter project. Add dependency in pubspec.yaml

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:universal_html/html.dart' as html;

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PDF viewer demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Show Google Drive file in Flutter'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String path;

  Future<String> _getFileFromGoogleDrive() async {
    final driveUrl =
        "https://script.google.com/macros/s/AKfycbzY-XQxMfq6KeeRL_-4y8DnnBanu3PX813Ipfz8xogD7dgQKb2Y/exec";

    return await http.get(driveUrl).then((response) {
      print(response.body); //Error
      //TODO:
      html.Blob blob = new html.BlobText(response.body);
      final url = html.Url.createObjectUrlFromBlob(blob);
      html.window.open(url, "_blank");
      html.Url.revokeObjectUrl(url);
      return null;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text("Click to open file."),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _getFileFromGoogleDrive,
        tooltip: 'Show file',
        child: Icon(Icons.file_present),
      ),
    );
  }
}

Error: Flutter error when pressing Show file button:

Bad UTF-8 encoding found while decoding string: %PDF-1.5
%����
2 0 obj
<< /Linearized 1 /L 17762 /H [ 750 126 ] /O 6 /E 17487 /N 1 /T 17486 >>
endobj
                                                                                                                 
3 0 obj
<< /Type /XRef /Length 51 /Filter /FlateDecode /DecodeParms << /Columns 4 /Predictor 12 >> /W [ 1 2 1 ] /Index [ 2 24 ] /Info 11 0 R /Root 4 0 R /Size 26 /Prev 17487                 /ID [<439e80749f258bfcf6a670df0083ad46><439e80749f258bfcf6a670df0083ad46>] >>
stream
x�cbd�g`b`8 $���XF@��Dh   ! af�Me`b<p����b
0

There are 0 best solutions below