使用 Blob 和 msSaveBlob 以本地方式保存文件

最新推荐文章于 2024-06-26 14:53:07 发布

p312011150

最新推荐文章于 2024-06-26 14:53:07 发布

阅读量3.4w

点赞数 1

分类专栏： javascript

javascript 专栏收录该内容

188 篇文章 1 订阅

订阅专栏

使用 Blob 和 msSaveBlob 以本地方式保存文件

本主题从使用 Web 存储以本地方式保存文件停止的位置开始，演示如何使用 Blob 构造函数以及 window.navigator.msSaveBlob 和window.navigator.msSaveOrOpenBlob 方法以本地方式保存文件（任意大小）。

本主题包含下列部分：

注意以下示例要求使用 Internet Explorer 10 或更高版本。

使用 BlobBuilder API 创建 Blob

使用 Blob 构造函数可以直接在客户端上创建和操作 Blob（通常等效于一个文件）。Internet Explorer 10 的 msSaveBlob 和 msSaveOrOpenBlob 方法允许用户在客户端上保存文件，方法如同从 Internet 下载文件，这是此类文件保存到“下载”文件夹的原因。

请注意，msSaveBlob 和 msSaveOrOpenBlob 之间的区别就在于前者仅为用户提供“保存”按钮，而后者不但提供“保存”按钮，还提供“打开”按钮。

为了帮助了解 Blob 构造函数和 msSaveBlob/msSaveOrOpenBlob 如何用于在客户端上保存更改的文件，请考虑以下示例：

示例 1

JavaScript

<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Example 1</title>
</head>

<body>
  <h1>Example 1</h1>
  <script>
    var blobObject = new Blob(["I scream. You scream. We all scream for ice cream."]); 
    
    window.navigator.msSaveBlob(blobObject, 'msSaveBlob_testFile.txt'); // The user only has the option of clicking the Save button.
    alert('File save request made using msSaveBlob() - note the single "Save" button below.');
    
    var fileData = ["Before you insult a person, walk a mile in their shoes. That way, when you insult them, you'll be a mile away - and have their shoes."];
    blobObject = new Blob(fileData);
    window.navigator.msSaveOrOpenBlob(blobObject, 'msSaveBlobOrOpenBlob_testFile.txt'); // Now the user will have the option of clicking the Save button and the Open button.
    alert('File save request made using msSaveOrOpenBlob() - note the two "Open" and "Save" buttons below.');
  </script>
</body>

</html>

使用 Blob()构造函数，我们首先创建一个 Blob 对象，其参数是包含所需文件内容的数组：

var blobObject = new Blob(["I scream. You scream. We all scream for ice cream."]);

我们接下来从 blobObject 复制该内容，并将其保存到一个文本文件（该文件保存在下载文件夹中）：

window.navigator.msSaveBlob(blobObject, 'msSaveBlob_testFile.txt');

注意如果用户提供可以如此操作的权限（通过单击相应信息栏中关联的提示），则只能将 msSaveBlob_testFile.txt 保存到 Downloads 文件夹。

然后，使用 msSaveOrOpenBlob 方法重复该过程，该方法为用户提供了“保存”和“打开”选项。

下例添加 Blob 功能检测：

示例 2

JavaScript

<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Example 2</title>
</head>

<body>
  <h1>Example 2</h1>
  <script>
    function requiredFeaturesSupported() {
      return ( BlobConstructor() && msSaveOrOpenBlobSupported() );
    }
    
    function BlobConstructor() {
      if (!window.Blob) {
        document.getElementsByTagName('body')[0].innerHTML = "<h1>The Blob constructor is not supported - upgrade your browser and try again.</h1>";
        return false;
      } // if
      
      return true;
    } // BlobConstructor
    
    function msSaveOrOpenBlobSupported() {
      if (!window.navigator.msSaveOrOpenBlob) { // If msSaveOrOpenBlob() is supported, then so is msSaveBlob().
        document.getElementsByTagName('body')[0].innerHTML = "<h1>The msSaveOrOpenBlob API is not supported - try upgrading your version of IE to the latest version.</h1>";            
        return false;
      } // if
      
      return true;
    } // msSaveOrOpenBlobSupported
        
    if (requiredFeaturesSupported()) {
      var blobObject = new Blob(["I scream. You scream. We all scream for ice cream."]);
      
      window.navigator.msSaveBlob(blobObject, 'msSaveBlob_testFile.txt');
      alert('File save request made using msSaveBlob() - note the single "Save" button below.');
      
      var fileData = ["Before you insult a person, walk a mile in their shoes. That way, when you insult them, you'll be a mile away - and have their shoes."];
      blobObject = new Blob(fileData);
      window.navigator.msSaveOrOpenBlob(blobObject, 'msSaveBlobOrOpenBlob_testFile.txt');
      alert('File save request made using msSaveOrOpenBlob() - note the two "Open" and "Save" buttons below.');
    }
  </script>
</body>

</html>

将文件保存到客户端后，下一步是从保存的文件中检索数据。以下示例基于读取本地文件和使用 Web 存储以本地方式保存文件，允许创建一个基于 canvas 的绘图，将其保存到本地文件并显示此类保存的绘图。此示例通常按照如下方式使用：

使用鼠标或手指（仅触摸设备）在框内创建一个绘图。
单击“保存”按钮，然后在“信息栏”中单击得到的“保存”按钮。
通过单击 x 关闭第二个“信息栏”。
单击“擦除”按钮。
单击“加载”按钮，然后单击得到的“浏览”按钮并选择以前保存的绘图文件。随即将显示保存的绘图。

请注意，绘图保存后，跳过第 4 步可允许用户合成多个绘图。

示例 3

JavaScript

<!DOCTYPE html>
<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>Example 3</title>
  <style>
    html { 
     -ms-touch-action: none; /* Capture all touch events for our own purposes. */
     text-align: center;
    }
  
    #hideWrapper { 
      display: none; /* Do not show the file picker dialog until we're ready to do so. */
    }    
  </style>
</head>

<body>
  <h1>Example 3</h1>
  <canvas id="drawingSurface" width="500" height="500" style="border:1px solid black;">
  </canvas> <!-- The canvas element can only be manipulated via JavaScript -->
  <div>
    <button id="erase">Erase</button>
    <button id="save">Save</button>
    <button id="load">Load</button>
  </div>  
  <div id="hideWrapper">
    <p>Select one of your saved canvas drawings to display:</p>
    <input type="file" id="fileSelector" /> <!-- By design, if you select the exact same files two or more times, the 'change' event will not fire. -->
  </div>    
  <script>
    function requiredFeaturesSupported() {
      return ( 
               BlobConstructorSupported() && 
               msSaveOrOpenBlobSupported() && 
               canvasSupported() && 
               fileApiSupported()
             );
    } // requiredFeaturesSupported
    
    function BlobConstructorSupported() {
      if (!window.Blob) {
        document.getElementsByTagName('body')[0].innerHTML = "<h1>The Blob constructor is not supported - upgrade your browser and try again.</h1>";
        return false;
      } // if
      
      return true;
    } // BlobConstructorSupported
    
    function msSaveOrOpenBlobSupported() {
      if (!window.navigator.msSaveOrOpenBlob) { // If msSaveOrOpenBlob() is supported, then so is msSaveBlob().
        document.getElementsByTagName('body')[0].innerHTML = "<h1>The msSaveOrOpenBlob API is not supported - upgrade Internet Explorer and try again.</h1>";            
        return false;
      }
      
      return true;
    } // msSaveOrOpenBlobSupported
        
    function canvasSupported() {
      if (!document.createElement('canvas').getContext) {
        document.getElementsByTagName('body')[0].innerHTML = "<h1>Canvas is not supported - upgrade your browser and try again.</h1>";                  
        return false;
      }
      
      return true;
    } // canvasSupported  
    
    function fileApiSupported() {
      if (document.getElementById('fileSelector').files && window.FileReader) {
        return true;        
      }
      else {
        document.getElementsByTagName('body')[0].innerHTML = "<h1>The File API is not sufficiently supported - upgrade your browser and try again.</h1>";            
        return false;      
      }
    } // fileSelectorSupported      
        
    if ( requiredFeaturesSupported() ) {    
      var canvas = document.getElementById('drawingSurface'); // A static variable, due to the fact that one or more local functions access it.
      var context = canvas.getContext('2d'); // A static variable, due to the fact that one or more local functions access it.

      context.fillStyle = "purple"; // Because purple is cool.

      if (window.navigator.msPointerEnabled) {
        canvas.addEventListener('MSPointerMove', paintCanvas, false);
      }
      else {
        canvas.addEventListener('mousemove', paintCanvas, false);
      }

      document.getElementById('erase').addEventListener('click', eraseCanvas, false);
      document.getElementById('save').addEventListener('click', saveCanvas, false);
      document.getElementById('load').addEventListener('click', loadCanvas, false);
      
      document.getElementById('fileSelector').addEventListener('change', handleFileSelection, false); // Add an onchange event listener for the <input id="fileSelector"> element.      
    } // if ( requiredFeaturesSupported() )
    
    function paintCanvas(event) { // The "event" object contains the position of the pointer/mouse.
      context.fillRect(event.offsetX, event.offsetY, 4, 4); // Draw a 4x4 rectangle at the given coordinates (relative to the canvas box). As of this writing, not all browsers support offsetX and offsetY.
    }

    function saveCanvas() {
      var drawingFileName = "canvas" + Math.round( (new Date()).getTime() / 1000 ) + ".txt"; // Produces a unique file name every second.
      var blobObject = new Blob( [canvas.toDataURL()] ); // Create a blob object containing the user's drawing.
      
      window.navigator.msSaveBlob(blobObject, drawingFileName); // Copy the blob object content and save it to a file.
      document.getElementById('hideWrapper').style.display = 'none'; // Remove the file picker dialog from the screen if the Save button gets clicked.      
    } // saveCanvas

    function eraseCanvas() {
      context.clearRect(0, 0, context.canvas.width, context.canvas.height);
      document.getElementById('hideWrapper').style.display = 'none'; // Remove the file picker dialog from the screen if the Erase button gets clicked.
    } // eraseCanvas

    function loadCanvas() {
      document.getElementById('hideWrapper').style.display = 'block'; // Unhide the file picker dialog so the user can select a saved canvas drawing to load into the canvas element.   
    } // loadCanvas      
    
    function handleFileSelection(evt) {    
      var files = evt.target.files; // The file selected by the user (as a FileList object).

      if (!files) {
        alert("The selected file is invalid - do not select a folder. Please reselect and try again.");
        return;
      }

      // "files" is a FileList of file objects. Try to display the contents of the selected file:
      var file = files[0]; // The way the <input> element is set up, the user cannot select multiple files.
      
      if (!file) {
        alert("Unable to access " + file.name.toUpperCase() + "Please reselect and try again."); 
        return;
      }
      if (file.size == 0) {
        alert("Unable to access " + file.name.toUpperCase() + " because it is empty. Please reselect and try again.");
        return;
      }
      if (!file.type.match('text/.*')) {
        alert("Unable to access " + file.name.toUpperCase() + " because it is not a known text file type. Please reselect and try again.");
        return;
      }
      
      // Assert: we have a valid file.
      
      startFileRead(file); // Asychronously fire off a file read request.      
      document.getElementById('hideWrapper').style.display = 'none'; // Remove the file picker dialog from the screen since we have a valid file.      
    } // handleFileSelection
    
    function startFileRead(fileObject) {
      var reader = new FileReader(); //

      // Set up asynchronous handlers for file-read-success, file-read-abort, and file-read-errors:
      reader.onloadend = displayDrawing; // "onloadend" fires when the file contents have been successfully loaded into memory.
      reader.abort = handleFileReadAbort; // "abort" files on abort.
      reader.onerror = handleFileReadError; // "onerror" fires if something goes awry.

      if (fileObject) { // Safety first.
        reader.readAsText(fileObject); // Asynchronously start a file read thread. Other supported read methods include readAsArrayBuffer() and readAsDataURL().
      }
      else {
        alert("fileObject is null in startFileRead().");
      }
    } // startFileRead
    
    function displayDrawing(evt) {
      var img = new Image(); // The canvas drawImage() method expects an image object.
  
      img.src = evt.target.result; // Obtain the file contents, which was read into memory (whose format is a text data URL string).
      // eraseCanvas(); To allow composite drawings, remove this comment.
      img.onload = function() { // Only render the saved drawing when the image object has fully loaded the drawing into memory.
        context.drawImage(img, 0, 0); // Draw the image starting at canvas coordinate (0, 0) - the upper left-hand corner of the canvas.
      } // img.onload */
    } // displayFileText
      
    function handleFileReadAbort(evt) {
      alert("File read aborted.");
    } // handleFileReadAbort

    function handleFileReadError(evt) {
      switch (evt.target.error.name) {
        case "NotFoundError":
          alert("The file could not be found at the time the read was processed.");
          break;
        case "SecurityError":
          alert("A file security error occured.");
          break;
        case "NotReadableError":
          alert("The file cannot be read. This can occur if the file is open in another application.");
          break;
        case "EncodingError":
          alert("The length of the data URL for the file is too long.");
          break;
        default:
          alert("File error code " + evt.target.error.name);
      } // switch
    } // handleFileReadError
  </script>
</body>

</html>

你可能尚未注意到，示例 3 中的一个特征是无法连续两次重新加载同一绘图文件。即，无法执行以下过程：

绘图显示时，单击“擦除”。
使用鼠标或手指（仅触摸设备）在框内创建一个绘图。
单击“保存”按钮，然后在“信息栏”中单击得到的“保存”按钮。
通过单击 x 关闭第二个“信息栏”。
单击“擦除”按钮。
单击“加载”按钮，然后单击出现的“浏览”按钮并选择在第 3 步中创建的绘图文件。随即将显示保存的绘图。
单击“擦除”按钮。
单击“加载”按钮，然后单击得到的“浏览”按钮并选择在第 6 步中选择的同一绘图文件。此时不会显示该绘图。

此行为是故意如此设计的，你可以轻松解决此问题。第一步是将 <input type="file" id="fileSelector" /> 元素放到 <form> 元素中，如下所示：

JavaScript

<div id="hideWrapper">
  <p>Select one of your saved canvas drawings to display:</p>
  <form>
    <input type="file" id="fileSelector" />
  </form>
</div>    
<script>

下一步是通过单击“加载”按钮时调用表单的 reset() 方法来清除表单子元素中之前的任何用户输入。

JavaScript

function loadCanvas() {
  document.querySelector('#hideWrapper > form').reset(); // Allow the input element to pick the same file consecutively more than once.    
  document.getElementById('hideWrapper').style.display = 'block'; // Unhide the file picker dialog so the user can select a saved canvas drawing to load into the canvas element.   
} // loadCanvas

此处提供此更新的示例：示例 4 （右键单击网页并选择“查看源”以查看它的源代码）。

同样，示例 5 通过改进简单的绘图“应用”以及将 canvas.toDataURL() 替换为 canvas.msToBlob() 来扩展示例 4。使用 canvas.toDataURL()，可以预防使用其他应用程序轻松查看已保存绘图的可能性。将绘图保存为 PNG 文件的好处是允许很多标准应用程序（包括浏览器）显示绘图。通过切换到 canvas.msToBlob()，我们可以直接将文件保存为 PNG 格式，如下所示：

JavaScript

function saveCanvas() {
  var drawingFileName = "canvas" + Math.round( (new Date()).getTime() / 1000 ) + ".png"; // Produces a unique file name every second.
  
  window.navigator.msSaveBlob(globals.canvas.msToBlob(), drawingFileName); // Save the user's drawing to a file.
  document.getElementById('filePickerWrapper').style.display = 'none'; // Remove the file picker dialog from the screen since we just saved the user's file.
} // saveCanvas

此外，将文件保存为 PNG 格式可允许我们将 startFileRead(file)（及其三个关联的回调函数）替换为以下四行代码：

JavaScript

img.src = window.URL.createObjectURL(file);
img.onload = function() { 
  globals.context.drawImage(img, 0, 0); 
  window.URL.revokeObjectURL(this.src); 
}

此处提供完整的示例：示例 5（右键单击网页并选择“查看源”以查看它的源代码）。

我们得出结论，使用 Windows Internet Explorer 的 msSaveBlob 和 msSaveOrOpenBlob 方法以及 Blob 构造函数，可以在客户端上保存修改的文件 - 这在 Internet Explorer 10 之前相对较难。