So wird’s gemacht: Speichern von Dateien über die Dateiauswahl (HTML)

Artikel
12/12/2015

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Mithilfe von fileSavePicker können Benutzer den Namen und Speicherort zum Speichern von App-Inhalten angeben.

Voraussetzungen

Kenntnisse in der asynchronen Programmierung für Windows-Runtime-Apps mit JavaScript

Unter Schnellstart: Verwenden von Zusagen in JavaScript erfahren Sie, wie Sie asynchrone Apps erstellen.

Anweisungen

Schritt 1: Erstellen und Anpassen der Dateiauswahl zur Anzeige von Speicherorten für Benutzer

Verwenden Sie fileSavePicker, damit Benutzer den Namen, Dateityp und Speicherort von zu speichernden Dateien angeben können. Sie können die Dateiauswahl durch Festlegen von Eigenschaften für das fileSavePicker-Objekt, das Sie erstellen, anpassen.

Im Beispiel zur Dateiauswahl wird veranschaulicht, wie Sie ein fileSavePicker-Objekt erstellen und anpassen.

// 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";

Sie sollten fileSavePicker-Eigenschaften festlegen, die für Ihre Benutzer und Ihre App relevant sind. Richtlinien zur Anpassung der Dateiauswahl erhalten Sie in Richtlinien und Prüfliste für die Dateiauswahl.

Im Beispiel zur Dateiauswahl wird die Dateiauswahl durch Festlegen von drei fileSavePicker-Eigenschaften angepasst: suggestedStartLocation, fileTypeChoices und suggestedFileName.

Hinweis fileSavePicker-Objekte verwenden pickerViewMode.list zum Anzeigen von Daten.

JJ150595.wedge(de-de,WIN.10).gif Anpassen eines FileSavePicker-Objekts im Detail

Da der Benutzer in unserem Fall ein Dokument oder eine Textdatei speichert, wird im Beispiel savePicker.suggestedStartLocation für den lokalen Ordner der App mithilfe von LocalFolder festgelegt.
```
savePicker.suggestedStartLocation = Windows.Storage.ApplicationData.localFolder;
```
Legen Sie suggestedStartLocation auf einen Pfad im Dateisystem fest, der zum ausgewählten Dateityp passt. Soll der Benutzer also Musik, Bilder oder Videos auswählen, stellen Sie den Ausgangspfad auf Musik, Bilder bzw. Videos ein. Legen Sie für alle anderen Dateitypen den lokalen Ordner der App als Ausgangspfad fest. Hierbei handelt es sich lediglich um eine Ausgangsposition. Benutzer haben beim Verwenden der Dateiauswahl die Möglichkeit, andere Speicherorte auszuwählen.
Da wir sicherstellen möchten, dass unsere App die Datei nach dem Speichern öffnen kann, wird im Beispiel savePicker.fileTypeChoices.insert für die Angabe der vom Beispiel unterstützten Dateitypen verwendet (Microsoft Word-Dokumente und Textdateien).
```
savePicker.fileTypeChoices.insert("Plain Text", [".txt"]);
```
Stellen Sie sicher, dass alle von Ihnen angegebenen Dateitypen von Ihrer App unterstützt werden.

Die Benutzer können ihre Datei unter einem beliebigen der von Ihnen in dieser Liste angegebenen Dateitypen speichern. Sie können den Dateityp auch ändern, indem sie im Dropdownsteuerelement in der unteren rechten Ecke der Dateiauswahl einen anderen Dateityp auswählen (den Sie zuvor angegeben haben). Standardmäßig wird die erste Dateitypauswahl in der Liste ausgewählt. Wenn Sie den standardmäßig ausgewählten Dateityp ändern möchten, legen Sie die savePicker.defaultFileExtension-Eigenschaft fest.

Hinweis Für die Dateiauswahl wird zudem der aktuell ausgewählte Dateityp zum Filtern nach den angezeigten Dateien verwendet, sodass dem Benutzer nur die Dateitypen angezeigt werden, die mit den ausgewählten Dateitypen übereinstimmen.
Da wir dem Benutzer einige Eingaben ersparen möchten, legt das Beispiel eine savePicker.suggestedFileName-Eigenschaft zum Speichern der Datei fest.
```
savePicker.suggestedFileName = "New Document";
```
Versuchen Sie, den vorgeschlagenen Dateinamen für die Datei, die der Benutzer speichert, möglichst relevant zu machen. Beispielsweise können Sie wie in Word den vorhandenen Dateinamen vorschlagen, sofern vorhanden. Sie können auch die erste Zeile eines Dokuments vorschlagen, wenn der Benutzer eine noch nicht benannte Datei speichert.

Schritt 2: Anzeigen des fileSavePicker-Objekts zum Speichern einer Datei

Nachdem Sie die Dateiauswahl erstellt und angepasst haben, können Sie es den Benutzern durch Aufrufen von savePicker.pickSaveFileAsync ermöglichen, eine Datei zu speichern.

Nachdem die Benutzer den Namen, Dateityp und Speicherort angegeben und bestätigt haben, dass die Dateien gespeichert werden, gibt pickSaveFileAsync ein storageFile-Objekt zurück, das die gespeicherte Datei darstellt. Sie können diese Datei mit then oder done erfassen und verarbeiten.

Im Beispiel zur Dateiauswahl wird gezeigt, wie die Dateiauswahl angezeigt wird, damit Benutzer eine einzelne Datei auswählen können.

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");
    }
});

Nach dem Speichern der Datei besitzt die App Lese- und Schreibzugriff für diese Datei. Im Beispiel wird die gespeicherte Datei im file-Parametererfasst und die Gültigkeit der Datei überprüft. Die Datei wird jedoch nicht weiter im Beispiel verarbeitet. In Schnellstart: Lesen und Schreiben einer Datei erfahren Sie, wie Sie in die resultierende Datei schreiben und daraus lesen können.

Tipp Sie sollten vor einer weiteren Verarbeitung immer die Gültigkeit der gespeicherten Datei (file im Beispiel) immer überprüfen. Anschließend können Sie Inhalte dem Zweck der App entsprechend in der Datei speichern und das entsprechende Verhalten festlegen, falls die ausgewählte Datei nicht gültig ist.

Anmerkungen

Wenn Sie ähnlichen Code wie den hier angezeigten Code verwenden, sollte Ihre App den Benutzern die Dateiauswahl anzeigen. Die Benutzer können dann Dateien auswählen, die von der App geöffnet werden. In Schnellstart: Lesen und Schreiben einer Datei erfahren Sie, wie Sie in die resultierende Datei schreiben und daraus lesen können.

Wenn Sie der App den Befehl "Speichern unter" hinzufügen möchten, fügen Sie der Benutzeroberfläche der App ein Steuerelement hinzu, das fileSavePicker aufruft. Weitere Informationen zum Hinzufügen von Steuerelementen finden Sie unter Hinzufügen von Steuerelementen und Inhalten.

Wenn Ihre App einen Speicherort für Benutzer über die Dateiauswahl bereitstellen soll, finden Sie Informationen dazu unter Schnellstart: Integration mit Verträgen für die Dateiauswahl.

Freigeben über

So wird’s gemacht: Speichern von Dateien über die Dateiauswahl (HTML)

Voraussetzungen

Anweisungen

Schritt 1: Erstellen und Anpassen der Dateiauswahl zur Anzeige von Speicherorten für Benutzer

Schritt 2: Anzeigen des fileSavePicker-Objekts zum Speichern einer Datei

Anmerkungen

Vollständiges Beispiel

Verwandte Themen

Zusätzliche Ressourcen