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

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

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

本主题包含下列部分:

  • 使用 BlobBuilder API 创建 Blob
  • 相关主题
注意  以下示例要求使用 Internet Explorer 10 或更高版本。
 

使用 BlobBuilder API 创建 Blob

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

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

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

示例 1

JavaScript




  "text/html; charset=utf-8" http-equiv="Content-Type">
  Example 1



  

Example 1

使用 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




  "text/html; charset=utf-8" http-equiv="Content-Type">
  Example 2



  

Example 2

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

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

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

示例 3

JavaScript




  "text/html; charset=utf-8" http-equiv="Content-Type">
  Example 3
  



  

Example 3

"drawingSurface" width="500" height="500" style="border:1px solid black;">
"hideWrapper">

Select one of your saved canvas drawings to display:

"file" id="fileSelector" />

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

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

此行为是故意如此设计的,你可以轻松解决此问题。第一步是将  元素放到 

 元素中,如下所示:

JavaScript
"hideWrapper">

Select one of your saved canvas drawings to display:

"file" id="fileSelector" />

你可能感兴趣的:(javascript)