filesaver.js詳解

一、簡介

filesaver.js是一個實現文件保存的javascript庫，它包含了一個名為FileSaver的對象，能夠在用戶的本地文件系統中創建和保存文件。該庫可以支持在Blob, File, ArrayBuffer, URL等數據類型中創建和寫入數據，並將其保存為文件，同時還能夠支持設置文件的MIME類型，文件名和擴展名。

二、安裝

安裝filesaver.js非常簡單，只需要在頁面中引入js文件即可：

<script src="FileSaver.js"></script>

三、API

1. saveAs(Blob/File data, DOMString filename, [DOMString type])

該方法用於將Blob或File實例保存為本地文件，其中data為Blob或File實例,filename為保存的文件名,type為文件的MIME類型。

示例：

var blob = new Blob(["This is a test."], {type: "text/plain;charset=utf-8"});
saveAs(blob, "test.txt");

2. saveAs(URL data, DOMString filename, [Boolean disableAutoBOM])

該方法用於將URL資源保存為本地文件，其中data為要保存的資源的URL，filename為保存的文件名，disableAutoBOM為是否要自動在文件開頭加入BOM頭。

示例：

var url = "https://example.com/test.txt";
saveAs(url, "test.txt");

3. setBlobRegistry(registry)

該方法用於設置Blob和URL之間的映射關係，當Blob實例不需要時，可以使用該方法釋放內存。

示例：

var blob = new Blob(["This is a test."], {type: "text/plain;charset=utf-8"});
var url = URL.createObjectURL(blob);
saveAs(url, "test.txt");
URL.revokeObjectURL(url);

4. getBlobRegistry()

該方法用於獲取Blob和URL之間的映射關係，便於調試和查看。

四、示例

下面是一個完整的使用FileSaver.js保存文件的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Save File Demo</title>
  <script src="FileSaver.js"></script>
</head>
<body>
  <h1>Save File Demo</h1>
  <p>Click the button to save the text as a file:</p>
  <button onclick="saveTextAsFile()">Save File</button>
  <script>
    function saveTextAsFile() {
      var textToSave = "This is a test.";
      var textAsBlob = new Blob([textToSave], {type:"text/plain"});
      var fileNameToSaveAs = "test.txt";
      var downloadLink = document.createElement("a");
      downloadLink.download = fileNameToSaveAs;
      downloadLink.innerHTML = "Download File";
      if (window.webkitURL != null) {
        downloadLink.href = window.webkitURL.createObjectURL(textAsBlob);
      } else {
        downloadLink.href = window.URL.createObjectURL(textAsBlob);
        downloadLink.onclick = destroyClickedElement;
        downloadLink.style.display = "none";
        document.body.appendChild(downloadLink);
      }
      downloadLink.click();
    }
    function destroyClickedElement(event) {
      document.body.removeChild(event.target);
    }
  </script>
</body>
</html>

五、總結

FileSaver.js是一個非常實用的javascript庫，可以方便的實現文件保存的功能。通過本文的介紹，我們了解了該庫的安裝方法、API接口以及一個完整的示例。希望本文能對你有所幫助！

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/185879.html