Lire XML local avec JS

En ce moment, en raison de la politique de sécurité, Chromium ne peut pas lire les fichiers locaux via ajax sans --allow-file-access-from-files . Mais j'ai actuellement besoin de créer une application Web où la base de données est un fichier xml (dans le cas extrême, json), situé dans un répertoire avec index.html. Il est entendu que l'utilisateur peut exécuter cette application localement. Existe-t-il des solutions de lecture pour le fichier xml- (json-), sans l'enrouler dans une fonction et passer à l'extension js?

 loadXMLFile('./file.xml').then(xml => { // working with xml }); function loadXMLFile(filename) { return new Promise(function(resolve, reject) { if('ActiveXObject' in window) { // If is IE var xmlDoc = new ActiveXObject('Microsoft.XMLDOM'); xmlDoc.async = false; xmlDoc.load(filename); resolve(xmlDoc.xml); } else { /* * how to read xml file if is not IE? * ... * resolve(something); */ } } } 

Accès au file: protocole au chromium à l'aide de l'élément XMLHttpRequest() ou <link> sans --allow-file-access-from-files flag set at chrome instance launch is not enabled by default.

--allow-file-access-from-files

Par défaut, le fichier: // Les URI ne peuvent pas lire d'autres fichiers: // URI. Il s'agit d'une substitution pour les développeurs qui ont besoin de l'ancien comportement pour les tests.


En ce moment, en raison de la politique de sécurité, Chromium ne peut pas lire les fichiers locaux via ajax sans --allow-file-access-from-files . Mais j'ai actuellement besoin de créer une application Web où la base de données est un fichier xml (dans le cas extrême, json), situé dans un répertoire avec index.html. Il est entendu que l'utilisateur peut exécuter cette application localement. Existe-t-il des solutions de lecture pour le fichier xml- (json-), sans l'enrouler dans une fonction et passer à l'extension js?

Si l'utilisateur est conscient que les fichiers locaux doivent être utilisés par l'application, vous pouvez utiliser l'élément <input type="file"> pour que l'utilisateur puisse télécharger un fichier à partir du système de fichiers local de l'utilisateur, traiter le fichier à l'aide de FileReader , puis procéder à l'application.

Sinon, conseillez à l'utilisateur que l'utilisation de l'application nécessite le lancement du chrome avec un --allow-file-access-from-files de --allow-file-access-from-files , ce qui peut être réalisé en créant un lanceur à cet effet, en spécifiant un répertoire de données utilisateur différent pour l'instance du chrome. Le lanceur pourrait être, par exemple

 /usr/bin/chromium-browser --user-data-dir="/home/user/.config/chromium-temp" --allow-file-access-from-files 

Voir aussi Comment puis-je rendre permanent le drapeau Google Chrome "–allow-file-access-from-files"?

La commande ci-dessus pourrait également être exécutée sur le terminal

 $ /usr/bin/chromium-browser --user-data-dir="/home/user/.config/chromium-temp" --allow-file-access-from-files 

Sans créer de lanceur de bureau; Où lorsque l'instance du chrome est fermée

 $ rm -rf /home/user/.config/chromium-temp 

Pour supprimer le dossier de configuration pour l'instance du chrome.

Une fois que le drapeau est défini, l'utilisateur peut inclure l'élément <link> avec l' rel="import" et href indiquant le fichier local et le type configuré sur "application/xml" , pour une option autre que XMLHttpRequest pour obtenir un fichier. Accéder au document XML utilisant

 const doc = document.querySelector("link[rel=import]").import; 

Voir Existe – t-il un moyen de savoir si un lien / script est toujours en attente ou s'il a échoué .


Une autre alternative, bien que plus impliquée, serait d'utiliser requestFileSystem pour stocker le fichier chez LocalFileSystem .

Voir

  • Comment utiliser WebkitRequestFileSystem au fichier: protocole
  • Plugin de téléchargement de fichier jQuery: Est-il possible de préserver la structure des dossiers téléchargés?
  • Comment écrire dans le fichier (répertoire utilisateur) en utilisant JavaScript?

Ou créez ou modifiez une application chrome et utilisez

 chrome.fileSystem 

Voir GoogleChrome / chrome-app-samples / système de fichiers-accès .


L'approche la plus simple serait de fournir un moyen pour le téléchargement de fichiers par une action positive de l'utilisateur; Traiter le fichier téléchargé, puis procéder à la demande.

 const reader = new FileReader; const parser = new DOMParser; const startApp = function startApp(xml) { return Promise.resolve(xml || doc) }; const fileUpload = document.getElementById("fileupload"); const label = document.querySelector("label[for=fileupload]"); const handleAppStart = function handleStartApp(xml) { console.log("xml document:", xml); label.innerHTML = currentFileName + " successfully uploaded"; // do app stuff } const handleError = function handleError(err) { console.error(err) } let doc; let currentFileName; reader.addEventListener("loadend", handleFileRead); reader.addEventListener("error", handleError); function handleFileRead(event) { label.innerHTML = ""; currentFileName = ""; try { doc = parser.parseFromString(reader.result, "application/xml"); fileUpload.value = ""; startApp(doc) .then(function(data) { handleAppStart(data) }) .catch(handleError); } catch (e) { handleError(e); } } function handleFileUpload(event) { let file = fileUpload.files[0]; if (/xml/.test(file.type)) { reader.readAsText(file); currentFileName = file.name; } } fileUpload.addEventListener("change", handleFileUpload) 
 <input type="file" name="fileupload" id="fileupload" accept=".xml" /> <label for="fileupload"></label> 

Utilisez document.implementation.createDocument("", "", null)

Au lieu du new ActiveXObject('Microsoft.XMLDOM') .

Vous pouvez trouver l'API via GOOGLE. Bonne chance.

Si je comprends bien, la livraison est destinée à être exécutée localement afin que vous ne puissiez pas définir de drapeaux pour l'accès au fichier local sur la machine d'un utilisateur. Quelque chose que j'ai fait dans un pincement est de l'emballer comme un exécutable avec quelque chose comme nw.js et de garder les fichiers de données externes. Sinon, vous envisagez probablement de charger en tant que script en utilisant un schéma JSON dans un fichier JS.

J'ai eu un problème similaire auparavant. J'ai résolu en intégrant simplement le fichier XML dans le HTML en utilisant PHP. Étant donné que l'application est chargée localement à partir du disque, de la taille, du cache, etc. ne sont pas préoccupantes.

Si vous utilisez Webpack, vous pouvez importer directement le fichier à l'aide d'un chargeur comme celui-ci ou ceci , auquel cas le fichier est inclus dans le javascript groupé résultant.

Vous pouvez charger XML via une chaîne de texte à l'aide de DOMParser , Chargez simplement votre fichier et analysez le texte à l'aide de .parseFromString . Vous pouvez utiliser une instruction if contenant (window.DOMParser) pour vérifier si le DOMParser est pris en charge