Convertir du texte enrichi en texte brut et télécharger un TXT en JavaScript

RichTextEditor

Exportez le texte actuel en TXT UTF-8 avec aperçu sûr et invalidation des fichiers périmés.

Choisir entre texte et HTML

getPlainText() renvoie le texte extrait ; getHTMLCode() renvoie le balisage. Supprimer les balises par expression régulière peut coller les mots ou laisser des entités encodées. Le texte brut perd la mise en forme. Il convient à une copie de lecture, un index ou un historique de support, pas à une sauvegarde du document enrichi.

Exécuter l’exemple complet

Servez les fichiers depuis votre application. Préparer lit le document actuel, normalise CRLF et CR en LF et crée un Blob UTF-8 text/plain sans ajouter de BOM. Un lien télécharge document.txt. L’aperçu utilise textContent, sans interpréter le HTML. Modifier le contenu invalide l’ancien lien. Aucune requête serveur n’est envoyée.

<link rel="stylesheet" href="/richtexteditor/rte_theme_default.css">
<script src="/richtexteditor/rte.js"></script>
<script src="/richtexteditor/plugins/all_plugins.js"></script>
<style>body{font:16px/1.6 system-ui;max-width:960px;margin:24px auto;padding:0 16px}button,a{box-sizing:border-box;display:inline-flex;align-items:center;min-height:44px;padding:8px 16px}a[hidden]{display:none}pre{white-space:pre-wrap;overflow-wrap:anywhere}.editor-scroll{max-width:100%;overflow-x:auto}</style>
<h1>Export rich text as a UTF-8 text file</h1>
<div class="editor-scroll"><div id="editor"></div></div>
<button type="button" id="prepare">Prepare text file</button>
<a id="download" download="document.txt" hidden>Download .txt</a>
<p id="status" role="status" aria-live="polite"></p>
<pre id="preview"></pre>
<script>
const editor = new RichTextEditor("#editor", { toolbar: "full", height: "320px" });
editor.setHTMLCode("<h2>Project notes</h2><p>Keep the words, including <strong>formatting</strong>, 中文 and 👋.</p>");
const link = document.getElementById("download");
const preview = document.getElementById("preview");
const status = document.getElementById("status");
let currentURL = null, preparedHTML = null;
function clearPreparedFile() {
  if (currentURL) {
    const obsoleteURL = currentURL;
    // Do not revoke synchronously: a download may still be starting.
    setTimeout(() => URL.revokeObjectURL(obsoleteURL), 30000);
    currentURL = null;
  }
  preparedHTML = null;
  link.removeAttribute("href");
  link.hidden = true;
  preview.textContent = "";
}
function prepare() {
  clearPreparedFile();
  // Export the API result, not the HTML source or a regex-stripped version.
  const text = editor.getPlainText().replace(/\r\n?/g, "\n");
  preparedHTML = editor.getHTMLCode();
  const file = new Blob([text], { type: "text/plain;charset=utf-8" });
  currentURL = URL.createObjectURL(file);
  link.href = currentURL;
  link.hidden = false;
  preview.textContent = text;
  status.textContent = "Text file ready: " + file.size + " UTF-8 bytes. Click Download .txt. Nothing sent to a server.";
}
document.getElementById("prepare").addEventListener("click", prepare);
editor.attachEvent("change", () => {
  // Delayed notifications for the same saved HTML do not invalidate this snapshot.
  if (preparedHTML !== null && editor.getHTMLCode() === preparedHTML) return;
  clearPreparedFile();
  status.textContent = "Content changed. Prepare a new file before downloading.";
});
window.textDemo = { editor, prepare };
</script>

Comprendre les pertes

Paragraphes, marqueurs de liste, séparateurs de tableau, alternatives des images et liens dépendent de l’extraction. Testez des documents réels sans promettre un résultat identique à Markdown ou Word. TXT ne garde ni images, styles, commentaires, historique des modifications ni HTML de réédition. Conservez le HTML original pour récupérer un brouillon. Un éditeur vide peut produire des sauts de ligne. Cet exemple conserve les espaces extraits sans les rogner ; un changement de focus peut modifier les lignes finales.

Gérer la durée de vie du fichier

Une URL objet retient le Blob en mémoire. L’exemple libère les URL périmées après 30 secondes, pas au moment du clic. Le navigateur libère les autres à la fermeture de la page. Ce délai n’est pas un signal universel de fin du téléchargement. Testez téléchargements répétés, gros documents et appareils cibles. download suggère un nom ; le navigateur décide du mode de sauvegarde. Des téléchargements répétés peuvent demander une autorisation du navigateur. Ne contournez pas cette règle et ne lancez pas de lot sans demande de l’utilisateur.

Liste de vérification

Exportez emoji, accents combinés, chinois, japonais, paragraphes et tableaux. Comparez les octets au getPlainText() normalisé, pas au HTML. Testez un document vide et du texte ressemblant à une balise. Une modification après préparation doit retirer l’ancien lien. TXT ne remplace ni échappement CSV, assainissement HTML ni validation serveur.

À lire ensuite