Idioma: HTML | XAML

Como salvar arquivos usando seletores de arquivos (aplicativos do Tempo de Execução do Windows em JavaScript e HTML)

Applies to Windows and Windows Phone

Use o fileSavePicker para permitir que os usuários especifiquem o nome e o local onde desejam salvar o conteúdo do seu aplicativo.

Pré-requisitos

  • Entender a programação assíncrona dos aplicativos do Tempo de Execução do Windows em JavaScript

    Você pode aprender a escrever aplicativos assíncronas em Guia de início rápido: Usando promessas em JavaScript

Instruções

Etapa 1: Verificar se você pode chamar o seletor de arquivos

Sempre que você desejar chamar um seletor de arquivos, deverá primeiro verificar se o seu aplicativo pode mostrar o seletor de arquivos verificando se o seu aplicativo não é ajustado ou, se o aplicativo for ajustado, se ele poderá ser desajustado para mostrar o seletor de arquivos.

O Exemplo de seletor de arquivos demonstra como verificar o ApplicationView.value do aplicativo e como tentar desajustá-lo antes que o exemplo crie e mostre um seletor de arquivos.


// Verify that we are currently not snapped, or that we can unsnap to open the picker
var currentState = Windows.UI.ViewManagement.ApplicationView.value;
if (currentState === Windows.UI.ViewManagement.ApplicationViewState.snapped &&
    !Windows.UI.ViewManagement.ApplicationView.tryUnsnap()) {
    // Fail silently if we can't unsnap
    return;
}


Aviso  Se você tentar mostrar o seletor de arquivos quando seu aplicativo estiver ajustado, haverá falha na chamada e uma exceção.

Etapa 2: Criar e personalizar o seletor de arquivos para exibir os locais de salvamento

Use o fileSavePicker para que o usuário possa especificar o nome, o tipo de arquivo e o local de salvamento de um arquivo. Você pode personalizar o seletor de arquivos configurando as propriedades no fileSavePicker criado.

O exemplo de seletor de arquivos demonstra como criar e personalizar um objeto 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";


É preciso definir as propriedades de fileSavePicker que sejam relevantes para o usuário e para o aplicativo. Para obter as diretrizes que podem ajudá-lo a decidir como personalizar o seletor de arquivos, veja Diretrizes e lista de verificação dos seletores de arquivos.

O exemplo de seletor de arquivos personaliza o seletor de arquivos configurando três propriedades de fileSavePicker: suggestedStartLocation, fileTypeChoices e suggestedFileName

.

Observação  Os objetos fileSavePicker usam pickerViewMode.list para exibir os dados.

JJ150595.wedge(pt-br,WIN.10).gifPersonalizando um fileSavePicker, em detalhes

  1. Como nosso usuário está salvando um documento ou arquivo de texto, o exemplo define savePicker.suggestedStartLocation como Documentos usando PickerLocationId.documentsLibrary

    
    savePicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.documentsLibrary;
    
    

    Você deve definir o suggestedStartLocation como o local do sistema de arquivos mais apropriado ao tipo de arquivo que está sendo selecionado. Se o usuário selecionar música, imagens ou vídeos, defina o local inicial como Música, Imagens ou Vídeos, respectivamente. Para todos os demais tipos de arquivo, defina o local inicial como Documentos. Este é apenas um local de início. Os usuários podem navegar para outros locais enquanto utilizam o seletor de arquivos.

  2. Como queremos ter certeza de que nosso aplicativo pode abrir o arquivo depois de salvo, o exemplo usa savePicker.fileTypeChoices insert para especificar os tipos de arquivo aceitos pelo exemplo (documentos do Microsoft Word e arquivos de texto).

    
    savePicker.fileTypeChoices.insert("Plain Text", [".txt"]);
    
    

    Verifique se o seu aplicativo permite todos os tipos especificados.

    Os usuários podem salvar arquivos como qualquer um dos tipos de arquivo que você especifica nessa lista. Eles também podem mudar o tipo de arquivo selecionando outro tipo (desde que especificado) no controle suspenso, na parte inferior direita do seletor de arquivos. A primeira escolha de tipo de arquivo na lista é selecionada por padrão. Para mudar o tipo de arquivo que é selecionado por padrão, defina a propriedade savePicker.defaultFileExtension.

    Observação  O seletor de arquivos também usa o tipo de arquivo selecionado no momento para filtrar os arquivos a serem exibidos, de modo que somente os tipos de arquivo correspondentes ao tipos selecionados sejam exibidos para o usuário.

  3. Para que o usuário não tenha que digitar muito, o exemplo define savePicker.suggestedFileName para o arquivo a ser salvo.

    
    savePicker.suggestedFileName = "New Document";
    
    

    Tente sugerir um nome de arquivo que seja o mais relevante possível para o arquivo que o usuário está salvando. Por exemplo, para o Word, você pode sugerir o nome de arquivo existente, se houver, ou a primeira linha de um documento, quando o usuário salva um arquivo que ainda não tem nome.

Etapa 3: Mostrar o fileSavePicker para salvar um arquivo

Após criar e personalizar o seletor de arquivos, permita que o usuário salvar o arquivo chamando savePicker.pickSaveFileAsync.

Depois que o usuário especifica nome, tipo e local do arquivo e confirma que os arquivos devem ser salvos, pickSaveFileAsync retorna um objeto storageFile, que representa o arquivo salvo. Você pode capturar e processar esse arquivo usando then ou done.

O exemplo de seletor de arquivos demonstra como exibir o seletor de arquivos para permitir que o usuário salve um arquivo.


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


Depois que o arquivo é salvo, o aplicativo lê e grava o acesso a esse arquivo. O exemplo captura o arquivo salvo no parâmetro file e verifica se o arquivo é válido, mas o exemplo não processa realmente o arquivo. Você pode saber mais sobre como gravar e ler o arquivo resultante em Guia de início rápido: Lendo e gravando um arquivo.

Dica  Sempre verifique o arquivo salvo (file no exemplo) para ter certeza de sua validade antes de executar qualquer outro processamento. Depois disso, você poderá salvar o conteúdo no arquivo, conforme o adequado ao seu aplicativo, e fornecer o comportamento apropriado, se o arquivo selecionado não for válido.

Comentários

Se usar código similar ao que mostramos aqui, o seu aplicativo deverá exibir o seletor de arquivos para os usuários e os deixará especificar nome, tipo e local do arquivo a ser salvo. Saiba mais sobre como gravar e ler o arquivo resultante em Guia de início rápido: Lendo e gravando um arquivo

Se quiser acrescentar o recurso "salvar como" ao aplicativo, adicione um controle para que a interface do usuário chame fileSavePicker. Para saber como adicionar controles, consulte Adicionando controles e conteúdo.

Se quiser que o aplicativo forneça um local de salvamento aos usuários por meio do seletor de arquivos, consulte Guia de início rápido: Integrando contratos de seletor de arquivos.

Exemplo completo

Tópicos relacionados

Exemplo do seletor de arquivos
Amostra de acesso a arquivos
Diretrizes e lista de verificação dos seletores de arquivos
Guia de início rápido: acessando arquivos com seletores de arquivos
Início Rápido: Lendo ou gravando um arquivo
Referência
Windows.Storage.Pickers
Windows.Storage.Pickers.Provider
contratos de seletor de arquivos
Integrando contratos de seletor de arquivos
Diretrizes e lista de verificação de contratos de seletor de arquivos

 

 

Mostrar:
© 2014 Microsoft