如何通过文件选取器保存文件 (HTML)

项目
12/11/2015

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

使用 fileSavePicker 让用户指定他们想保存应用内容的名称和位置。

先决条件

了解使用 JavaScript 的 Windows 运行时应用的异步编程

在快速入门：在 JavaScript 中使用承诺中了解如何编写异步应用。

说明

步骤 1: 创建并自定义文件选取器以显示用户可以保存的位置

使用 fileSavePicker 以便你的用户可以指定保存文件的名称、文件类型以及位置。你可以通过在创建的 fileSavePicker 上设置属性来自定义文件选取器。

文件选取器示例展示了如何创建并自定义一个 fileSavePicker 对象。

// Create the picker object and set options
var savePicker = new Windows.Storage.Pickers.FileSavePicker();
savePicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.documentsLibrary;
// Dropdown of file types the user can save the file as
savePicker.fileTypeChoices.insert("Plain Text", [".txt"]);
// Default file name if the user does not type one in or select a file to replace
savePicker.suggestedFileName = "New Document";

你应当设置与你的用户和应用相关的 fileSavePicker 属性。有关帮助你确定如何自定义文件选取器的指南，请参阅文件选取器指南和清单。

文件选取器示例通过设置以下三个 fileSavePicker 属性来自定义文件选取器：suggestedStartLocation、fileTypeChoices 和 suggestedFileName 属性。

注意 fileSavePicker 对象使用 pickerViewMode.list 显示数据。

JJ150595.wedge(zh-cn,WIN.10).gif 自定义 fileSavePicker 的详细信息

由于我们的用户正在保存文档或文本文件，因此该示例通过使用 LocalFolder 将 savePicker.suggestedStartLocation 设置为应用的本地文件夹。
```
savePicker.suggestedStartLocation = Windows.Storage.ApplicationData.localFolder;
```
你应该将 suggestedStartLocation 设置为适合将选取的文件类型的文件系统位置。如果用户要选取音乐、图片或视频，请分别将开始位置设置为音乐、图片或视频。对于所有其他类型的文件，请将开始位置设置为应用的本地文件夹。这只是一个开始位置。用户可以在使用文件选取器时导航到其他位置。
由于我们希望确保我们的应用可以在其保存后打开该文件，该示例使用 savePicker.fileTypeChoices.insert 指定该示例支持的文件类型（Microsoft Word 文档和文本文件）。
```
savePicker.fileTypeChoices.insert("Plain Text", [".txt"]);
```
确保你指定的所有文件类型受应用支持。

用户将可以将他们的文件保存为你在此列表中指定的任何文件类型。他们还可以通过从文件选取器右下方的下拉控件选择不同的文件类型（你所指定的）来更改文件类型。将默认选择列表中的第一个文件类型选项。要更改默认选择哪个文件类型，请设置 savePicker.defaultFileExtension 属性。

注意文件选取器还使用当前选中的文件类型筛选显示的文件，以便仅向用户显示与选中的文件类型匹配的文件类型。
由于我们希望为用户节省一些键入操作，该示例为要保存的文件设置 savePicker.suggestedFileName。
```
savePicker.suggestedFileName = "New Document";
```
尽可能尝试使建议的文件名设置与用户正在保存的文件相关。例如，和 Word 一样，你可以建议现有的文件名（如果有），或者文档的第一行（如果用户正在保存尚未有名称的文件）。

步骤 2: 显示 fileSavePicker 以保存文件

在你创建并自定义文件选取器之后，让用户通过调用 savePicker.pickSaveFileAsync 来保存文件。

用户指定名称、文件类型和位置并确认保存文件之后，pickSaveFileAsync 返回一个表示已保存文件的 storageFile 对象。可以通过使用 then 或 done 来捕获和处理此文件。

文件选取器示例展示了如何显示文件选取器以让用户保存文件。

savePicker.pickSaveFileAsync().then(function (file) {
    if (file) {
        // Prevent updates to the remote version of the file until we finish making changes and call CompleteUpdatesAsync.
        Windows.Storage.CachedFileManager.deferUpdates(file);
        // write to file
        Windows.Storage.FileIO.writeTextAsync(file, file.name).done(function () {
            // Let Windows know that we're finished changing the file so the other app can update the remote version of the file.
            // Completing updates may require Windows to ask for user input.
            Windows.Storage.CachedFileManager.completeUpdatesAsync(file).done(function (updateStatus) {
                if (updateStatus === Windows.Storage.Provider.FileUpdateStatus.complete) {
                    WinJS.log && WinJS.log("File " + file.name + " was saved.", "sample", "status");
                } else {
                    WinJS.log && WinJS.log("File " + file.name + " couldn't be saved.", "sample", "status");
                }
            });
        });
    } else {
        WinJS.log && WinJS.log("Operation cancelled.", "sample", "status");
    }
});

保存文件之后，应用便对该文件具有读取和写入访问权限。该示例在 file 参数中捕获已保存的文件并且检查该文件是否有效，但该示例并不进一步实际处理该文件。你可以在快速入门：读取和写入文件中了解如何写入和读取结果文件。

提示应始终检查已保存的文件（示例中的 file）以确保在执行任何其他处理之前该文件有效。然后，你可以将内容保存到适合你的应用的文件，并在已选取的文件无效时提供相应的行为。

备注

如果使用与此处类似的代码，你的应用应向用户显示文件选取器，让用户指定要保存文件的名称、文件类型以及位置。你可以在快速入门：读取和写入文件中了解如何写入和读取结果文件。

如果你希望向你的应用中添加“另存为”，请向你的应用 UI 中添加一个调用 fileSavePicker 的控件。若要了解有关添加控件的信息，请参阅添加控件和内容。

如果你希望你的应用通过文件选取器向用户提供保存位置，请参阅快速入门：与文件选取器合约集成。

如何通过文件选取器保存文件 (HTML)

先决条件

说明

步骤 1: 创建并自定义文件选取器以显示用户可以保存的位置

步骤 2: 显示 fileSavePicker 以保存文件

备注

完整示例

相关主题

其他资源