如何將HTML導出到文檔而沒有邊框或彩色文本
[英]How to Export HTML to Document without border or colored text
問題描述
我想創建一個可編輯的文本，你填寫contentEditable區域並將文本結果導出為文檔，我在網上發現了一個腳本，我修改了它，但我面臨的問題是contentEditable區域不可見，它看起來像固定文本直到你點擊它，所以我為contentEditable區域做了一個黑色邊框和紅色文本，所以用戶可以看到它，但是當我導出文檔時它有黑色邊框和紅色文字所以當你填充文本時我怎么能讓它們可見並消失當你導出文件時， 我的網站受到了這個網站的啟發，這就是腳本jsfiddle
function Export2Doc(element, filename = ''){ var preHtml = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>Export HTML To Doc</title></head><body>"; var postHtml = "</body></html>"; var html = preHtml+document.getElementById(element).innerHTML+postHtml; var blob = new Blob(['\', html], { type: 'application/msword' }); // Specify link url var url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html); // Specify file name filename = filename?filename+'.doc':'document.doc'; // Create download link element var downloadLink = document.createElement("a"); document.body.appendChild(downloadLink); if(navigator.msSaveOrOpenBlob ){ navigator.msSaveOrOpenBlob(blob, filename); }else{ // Create a link to the file downloadLink.href = url; // Setting the file name downloadLink.download = filename; //triggering the function downloadLink.click(); } document.body.removeChild(downloadLink); }
span.a{ display:inline-block; }
<body> <div id="exportContent"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <span class="a" contenteditable="true" style="min-width:20px;border:1px solid black;color:red"> when an unknown printer </span> took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> <button onclick="Export2Doc('exportContent');">document</button> </body>
1 個解決方案
解決方案1
3 已采納 2019-05-30 14:51:30
從可編輯的span style="min-width:20px;border:1px solid black;color:red"刪除內聯樣式，並將其放在span.a選擇器下，將顯示設置為inline-block。
function Export2Doc(element, filename = ''){ var preHtml = "<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'><head><meta charset='utf-8'><title>Export HTML To Doc</title></head><body>"; var postHtml = "</body></html>"; var html = preHtml+document.getElementById(element).innerHTML+postHtml; var blob = new Blob(['\', html], { type: 'application/msword' }); // Specify link url var url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html); // Specify file name filename = filename?filename+'.doc':'document.doc'; // Create download link element var downloadLink = document.createElement("a"); document.body.appendChild(downloadLink); if(navigator.msSaveOrOpenBlob ){ navigator.msSaveOrOpenBlob(blob, filename); }else{ // Create a link to the file downloadLink.href = url; // Setting the file name downloadLink.download = filename; //triggering the function downloadLink.click(); } document.body.removeChild(downloadLink); }
span.a{ display:inline-block; min-width:20px; border:1px solid black; color:red; }
<body> <div id="exportContent"> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <span class="a" contenteditable="true"> when an unknown printer </span> took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. </div> <button onclick="Export2Doc('exportContent');">document</button> </body>
如何以交互方式將文本作為列表項附加到HTML文檔中的列表而不將列表項存儲為javascript變量？
[英]How to append text interactively as a list item to a list in the HTML document without storing the list item as a javascript variable?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.