Obtention de l’intégralité d’un document pour un complément pour PowerPoint ou Word
Vous pouvez créer un complément Office pour envoyer ou publier une présentation PowerPoint ou Word document à un emplacement distant. Cet article explique comment créer un complément de volet office simple pour PowerPoint ou Word qui obtient l’ensemble de la présentation ou du document en tant qu’objet de données et envoie ces données à un serveur web via une requête HTTP.
Éléments requis pour créer un complément pour PowerPoint ou Word
Dans cet article, vous utilisez un éditeur de texte pour créer le complément du volet Office pour PowerPoint ou Word. Pour créer le complément du volet Office, vous devez créer les fichiers suivants.
Sur un dossier réseau partagé ou sur un serveur web, vous avez besoin des fichiers suivants.
Un fichier HTML (GetDoc_App.html) qui contient l’interface utilisateur ainsi que des liens vers les fichiers JavaScript (y compris les fichiers Office.js et .js spécifiques à l’application) et les fichiers CSS (Cascading Style Sheet).
Un fichier JavaScript (GetDoc_App.js) pour contenir la logique de programmation du complément.
Un fichier CSS (Program.css) pour contenir les styles et la mise en forme du complément.
Un fichier manifeste de complément uniquement (GetDoc_App.xml) pour le complément, disponible dans un dossier réseau partagé ou un catalogue de compléments. Le fichier manifeste doit pointer vers l’emplacement du fichier HTML mentionné précédemment.
Vous pouvez également créer un complément pour votre application Office à l’aide de l’une des options suivantes. Vous n’aurez pas besoin de créer de nouveaux fichiers, car l’équivalent de chaque fichier requis sera disponible pour la mise à jour. Par exemple, les options du générateur Yeoman incluent ./src/taskpane/taskpane.html, ./src/taskpane/taskpane.js, ./src/taskpane/taskpane.css et ./manifest.xml.
- PowerPoint
- Word
Concepts fondamentaux à connaître pour créer un complément du volet Office
Avant de commencer à créer ce complément pour PowerPoint ou Word, vous devez savoir comment créer des Compléments Office et utiliser des requêtes HTTP. Cet article ne décrit pas comment décoder du texte codé en Base64 à partir d’une requête HTTP sur un serveur web.
Créer le manifeste pour le complément
Le fichier manifeste d’un complément Office fournit des informations importantes sur le complément : les applications qui peuvent l’héberger, l’emplacement du fichier HTML, le titre et la description du complément, ainsi que de nombreuses autres caractéristiques.
Dans l’éditeur de texte, ajoutez le code suivant au fichier manifeste.
<?xml version="1.0" encoding="utf-8" ?> <OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:type="TaskPaneApp"> <Id>[Replace_With_Your_GUID]</Id> <Version>1.0</Version> <ProviderName>[Provider Name]</ProviderName> <DefaultLocale>EN-US</DefaultLocale> <DisplayName DefaultValue="Get Doc add-in" /> <Description DefaultValue="My get PowerPoint or Word document add-in." /> <IconUrl DefaultValue="http://officeimg.vo.msecnd.net/_layouts/images/general/office_logo.jpg" /> <SupportUrl DefaultValue="[Insert the URL of a page that provides support information for the app]" /> <Hosts> <Host Name="Document" /> <Host Name="Presentation" /> </Hosts> <DefaultSettings> <SourceLocation DefaultValue="[Network location of app]/GetDoc_App.html" /> </DefaultSettings> <Permissions>ReadWriteDocument</Permissions> </OfficeApp>Enregistrez le fichier en tant queGetDoc_App.xml à l’aide de l’encodage UTF-8 dans un emplacement réseau ou dans un catalogue de compléments.
Créer l’interface utilisateur pour le complément
Pour l’interface utilisateur du complément, vous pouvez utiliser du code HTML écrit directement dans le fichier GetDoc_App.html . La logique de programmation et les fonctionnalités du complément doivent être contenues dans un fichier JavaScript (par exemple, GetDoc_App.js).
Utilisez la procédure suivante pour créer une interface utilisateur simple pour le complément, avec un titre et un bouton unique.
Dans un nouveau fichier de l’éditeur de texte, ajoutez le code HTML de votre application Office sélectionnée.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge"/> <title>Publish presentation</title> <link rel="stylesheet" type="text/css" href="Program.css" /> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js" type="text/javascript"></script> <script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/office.js" type="text/javascript"></script> <script src="GetDoc_App.js"></script> </head> <body> <form> <h1>Publish presentation</h1> <br /> <div><input id='submit' type="button" value="Submit" /></div> <br /> <div><h2>Status</h2> <div id="status"></div> </div> </form> </body> </html>Enregistrez le fichier en tant que GetDoc_App.html à l’aide de l’encodage UTF-8 sur un emplacement réseau ou sur un serveur web.
Remarque
Assurez-vous que les balises de tête du complément contiennent une balise de script avec un lien valide vers le fichier Office.js.
Nous allons utiliser des css pour donner au complément une apparence simple mais moderne et professionnelle. Utilisez le code CSS suivant pour définir le style du complément.
Dans un nouveau fichier dans l’éditeur de texte, ajoutez le code CSS suivant.
body { font-family: "Segoe UI Light","Segoe UI",Tahoma,sans-serif; } h1,h2 { text-decoration-color:#4ec724; } input [type="submit"], input[type="button"] { height:24px; padding-left:1em; padding-right:1em; background-color:white; border:1px solid grey; border-color: #dedfe0 #b9b9b9 #b9b9b9 #dedfe0; cursor:pointer; }Enregistrez le fichier en tant que Program.css à l’aide de l’encodage UTF-8 sur l’emplacement réseau ou sur le serveur web où se trouve le fichier GetDoc_App.html .
Ajouter le code JavaScript pour obtenir le document
Dans le code pour le complément, un gestionnaire vers l’événement Office.initialize ajoute un gestionnaire à l’événement Click du bouton Envoyer du formulaire et informe l’utilisateur que le complément est prêt.
L’exemple de code suivant montre le gestionnaire d’événements pour l’événement Office.initialize ainsi qu’une fonction d’assistance, updateStatus, pour l’écriture dans le status div.
// The initialize or onReady function is required for all add-ins.
Office.initialize = function (reason) {
// Checks for the DOM to load using the jQuery ready method.
$(document).ready(function () {
// Run sendFile when Submit is clicked.
$('#submit').on("click", function () {
sendFile();
});
// Update status.
updateStatus("Ready to send file.");
});
}
// Create a function for writing to the status div.
function updateStatus(message) {
var statusInfo = $('#status');
statusInfo[0].innerHTML += message + "<br/>";
}
Lorsque vous choisissez le bouton Envoyer dans l’interface utilisateur, le complément appelle la sendFile fonction , qui contient un appel à la méthode Document.getFileAsync . La getFileAsync méthode utilise le modèle asynchrone, comme d’autres méthodes de l’API JavaScript Office. Il a un paramètre obligatoire, fileType, et deux paramètres facultatifs, options et rappel.
Le paramètre fileType attend l’une des trois constantes de l’énumération FileType : Office.FileType.Compressed (« compressed »), Office.FileType.PDF (« pdf ») ou Office.FileType.Text (« text »). La prise en charge actuelle du type de fichier pour chaque plateforme est répertoriée sous les remarques Document.getFileType . Lorsque vous transmettez Compressed pour le paramètre fileType, la getFileAsync méthode renvoie le document actif sous forme de fichier de présentation PowerPoint (*.pptx) ou Word fichier de document (*.docx) en créant une copie temporaire du fichier sur l’ordinateur local.
La getFileAsync méthode retourne une référence au fichier en tant qu’objet File . L’objet File expose les quatre membres suivants.
La size propriété retourne le nombre d’octets dans le fichier. retourne sliceCount le nombre d’objets Slice (décrits plus loin dans cet article) dans le fichier.
Utilisez le code suivant pour obtenir le document PowerPoint ou Word actuel en tant qu’objet File à l’aide de la Document.getFileAsync méthode , puis effectuez un appel à la fonction définie getSlice localement. Notez que l’objet File , une variable de compteur et le nombre total de tranches dans le fichier sont transmis dans l’appel à getSlice dans un objet anonyme.
// Get all of the content from a PowerPoint or Word document in 100-KB chunks of text.
function sendFile() {
Office.context.document.getFileAsync("compressed",
{ sliceSize: 100000 },
function (result) {
if (result.status === Office.AsyncResultStatus.Succeeded) {
// Get the File object from the result.
var myFile = result.value;
var state = {
file: myFile,
counter: 0,
sliceCount: myFile.sliceCount
};
updateStatus("Getting file of " + myFile.size + " bytes");
getSlice(state);
} else {
updateStatus(result.status);
}
});
}
La fonction getSlice locale effectue un appel à la File.getSliceAsync méthode pour récupérer une tranche de l’objet File . La getSliceAsync méthode retourne un Slice objet à partir de la collection de tranches. Elle a deux paramètres requis, sliceIndex et callback. Le paramètre sliceIndex prend un entier en tant qu’indexeur dans la collection de tranches. Comme les autres méthodes de l’API JavaScript Office, la getSliceAsync méthode prend également une fonction de rappel en tant que paramètre pour gérer les résultats de l’appel de méthode.
L’objet Slice vous donne accès aux données contenues dans le fichier. Sauf indication contraire dans le paramètre options de la getFileAsync méthode, la taille de l’objet Slice est de 4 Mo. L’objet Slice expose trois propriétés : size, data et index. La size propriété obtient la taille, en octets, de la tranche. La index propriété obtient un entier qui représente la position de la tranche dans la collection de tranches.
// Get a slice from the file and then call sendSlice.
function getSlice(state) {
state.file.getSliceAsync(state.counter, function (result) {
if (result.status == Office.AsyncResultStatus.Succeeded) {
updateStatus("Sending piece " + (state.counter + 1) + " of " + state.sliceCount);
sendSlice(result.value, state);
} else {
updateStatus(result.status);
}
});
}
La Slice.data propriété retourne les données brutes du fichier sous la forme d’un tableau d’octets. Si les données sont au format texte (c’est-à-dire, XML ou texte brut), la tranche contient du texte brut. Si vous transmettez Office.FileType.Compressed pour le paramètre fileType de Document.getFileAsync, la tranche contient les données binaires du fichier sous la forme d’un tableau d’octets. Dans le cas d’un fichier PowerPoint ou Word, les tranches contiennent des tableaux d’octets.
Vous devez implémenter votre propre fonction (ou utiliser une bibliothèque disponible) pour convertir les données d’un tableau d’octets en chaîne codée en Base64. Pour plus d’informations sur le codage en Base64 avec JavaScript, voir Codage et décodage en Base64.
Une fois que vous avez converti les données en Base64, vous pouvez les transmettre à un serveur web de plusieurs façons, notamment en tant que corps d’une requête HTTP POST.
Ajoutez le code suivant pour envoyer une tranche au service web.
Remarque
Ce code envoie un fichier PowerPoint ou Word au serveur web en plusieurs tranches. Le serveur web ou le service doit ajouter chaque tranche individuelle dans un fichier unique, puis l’enregistrer en tant que fichier .pptx ou .docx avant de pouvoir y effectuer des manipulations.
function sendSlice(slice, state) {
var data = slice.data;
// If the slice contains data, create an HTTP request.
if (data) {
// Encode the slice data, a byte array, as a Base64 string.
// NOTE: The implementation of myEncodeBase64(input) function isn't
// included with this example. For information about Base64 encoding with
// JavaScript, see https://developer.mozilla.org/docs/Web/JavaScript/Base64_encoding_and_decoding.
var fileData = myEncodeBase64(data);
// Create a new HTTP request. You need to send the request
// to a webpage that can receive a post.
var request = new XMLHttpRequest();
// Create a handler function to update the status
// when the request has been sent.
request.onreadystatechange = function () {
if (request.readyState == 4) {
updateStatus("Sent " + slice.size + " bytes.");
state.counter++;
if (state.counter < state.sliceCount) {
getSlice(state);
} else {
closeFile(state);
}
}
}
request.open("POST", "[Your receiving page or service]");
request.setRequestHeader("Slice-Number", slice.index);
// Send the file as the body of an HTTP POST
// request to the web server.
request.send(fileData);
}
}
Comme son nom l’indique, la File.closeAsync méthode ferme la connexion au document et libère des ressources. Bien que le bac à sable des compléments Office collecte les références hors du cadre aux fichiers, il est recommandé de fermer explicitement les fichiers une fois que votre code est terminé. La closeAsync méthode a un seul paramètre, callback, qui spécifie la fonction à appeler à la fin de l’appel.
function closeFile(state) {
// Close the file when you're done with it.
state.file.closeAsync(function (result) {
// If the result returns as a success, the
// file has been successfully closed.
if (result.status === Office.AsyncResultStatus.Succeeded) {
updateStatus("File closed.");
} else {
updateStatus("File couldn't be closed.");
}
});
}
Le fichier JavaScript final peut se présenter comme suit :
/*
* Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
* See LICENSE in the project root for license information.
*/
// The initialize or onReady function is required for all add-ins.
Office.initialize = function (reason) {
// Checks for the DOM to load using the jQuery ready method.
$(document).ready(function () {
// Run sendFile when Submit is clicked.
$('#submit').on("click", function () {
sendFile();
});
// Update status.
updateStatus("Ready to send file.");
});
}
// Create a function for writing to the status div.
function updateStatus(message) {
var statusInfo = $('#status');
statusInfo[0].innerHTML += message + "<br/>";
}
// Get all of the content from a PowerPoint or Word document in 100-KB chunks of text.
function sendFile() {
Office.context.document.getFileAsync("compressed",
{ sliceSize: 100000 },
function (result) {
if (result.status === Office.AsyncResultStatus.Succeeded) {
// Get the File object from the result.
var myFile = result.value;
var state = {
file: myFile,
counter: 0,
sliceCount: myFile.sliceCount
};
updateStatus("Getting file of " + myFile.size + " bytes");
getSlice(state);
} else {
updateStatus(result.status);
}
});
}
// Get a slice from the file and then call sendSlice.
function getSlice(state) {
state.file.getSliceAsync(state.counter, function (result) {
if (result.status == Office.AsyncResultStatus.Succeeded) {
updateStatus("Sending piece " + (state.counter + 1) + " of " + state.sliceCount);
sendSlice(result.value, state);
} else {
updateStatus(result.status);
}
});
}
function sendSlice(slice, state) {
var data = slice.data;
// If the slice contains data, create an HTTP request.
if (data) {
// Encode the slice data, a byte array, as a Base64 string.
// NOTE: The implementation of myEncodeBase64(input) function isn't
// included with this example. For information about Base64 encoding with
// JavaScript, see https://developer.mozilla.org/docs/Web/JavaScript/Base64_encoding_and_decoding.
var fileData = myEncodeBase64(data);
// Create a new HTTP request. You need to send the request
// to a webpage that can receive a post.
var request = new XMLHttpRequest();
// Create a handler function to update the status
// when the request has been sent.
request.onreadystatechange = function () {
if (request.readyState == 4) {
updateStatus("Sent " + slice.size + " bytes.");
state.counter++;
if (state.counter < state.sliceCount) {
getSlice(state);
} else {
closeFile(state);
}
}
}
request.open("POST", "[Your receiving page or service]");
request.setRequestHeader("Slice-Number", slice.index);
// Send the file as the body of an HTTP POST
// request to the web server.
request.send(fileData);
}
}
function closeFile(state) {
// Close the file when you're done with it.
state.file.closeAsync(function (result) {
// If the result returns as a success, the
// file has been successfully closed.
if (result.status === Office.AsyncResultStatus.Succeeded) {
updateStatus("File closed.");
} else {
updateStatus("File couldn't be closed.");
}
});
}