Is it possible to use client-side generated blob u

问题:

I'm generating a CSV client-side and putting it into a Blob and then creating an object URL.

What I'm attempting to accomplish is generate this blob URL and then save the file to Google Drive. I'm using the Save to Drive button in this example but it doesn't seem to even load the save button unless I strip off "blob:http:" in which case it will look to load the button correctly but this isn't a valid file anymore.

Is this even possible to save a blob file to Google Drive?

Here's what my code looks like:

    var data = [["one", "info 1", "additional 1"], ["two", "info 2", "additional 2"]],
        csvContent = [], output, objectURL;

    data.forEach(function(infoArray, index) {
        var dataString = infoArray.join(",");
        csvContent += index < infoArray.length ? dataString+ "\n" : dataString;
    });

    output = new Blob([csvContent], { type: 'text/csv' });
    objectURL = URL.createObjectURL(output);

    gapi.savetodrive.render('savetodrive-div', {
      src: objectURL,
      filename: 'save-to-drive.csv',
      sitename: 'Example'
    });

Thanks!

回答1:

var data = [["one", "info 1", "additional 1"], ["two", "info 2", "additional 2"]],
    csvContent = [], output, objectURL;

data.forEach(function(infoArray, index) {
    var dataString = infoArray.join(",");
    csvContent += index < infoArray.length ? dataString+ "\n" : dataString;
});

output = new Blob([csvContent], { type: 'text/csv' });
objectURL = URL.createObjectURL(output);

gapi.savetodrive.render('savetodrive-div', {
  src: objectURL,
  filename: 'save-to-drive.csv',
  sitename: 'Example'
});

Is this what you need? Credit: http://qaru.site/questions/4397835/is-it-possible-to-use-client-side-generated-blob-url-to-save-to-google-drive

回答2:

Data URIs are not supported. See here: https://developers.google.com/drive/web/savetodrive#customizing_savetodrive_tag_attributes

回答3:

It does not work with 'blob:' URI, see details below.

This URL about data URIs doesn't say anything in particular about blob:, nor does this reference about the save to google drive button. Therefore I had to try it out myself with a blobl: URI to be sure.

See this fiddle.

The snippet below is the same, except it causes an error saying something with "The document is sandboxed and lacks the 'allow-same-origin' flag." when I tried it. (Hence I included the fiddle URL.)

$(document).ready(function() {
	var blob = new Blob(["test"], { type: "text/plain" })
  var url = window.URL.createObjectURL(blob);
	const attributeName = "data-src";
  $("#but").attr(attributeName, url);
  console.log(attributeName + ": " + $("#but").attr(attributeName));
  $.getScript("https://apis.google.com/js/platform.js");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="but" class="g-savetodrive" data-src="/test.pdf" data-filename="test.txt" data-sitename="TryItOut.Inc">
</div>