Експорт HTML в RTF за допомогою JavaScript

ПублікаціїКонвертувати

Розглянемо конвертацію HTML у RTF формат.

Створювати RTF файл будемо за допомогою Data URL.

Функція htmlToRTF для перетворення формату HTML у RTF приймає два параметри:

  • html - рядок який містить HTML текст.
  • options - об'єкт який містить такі властивості:
    • newWindow - до якого документу додавати html, логічне значення true або false. true - додавати html до нового вікна, false до поточного вікна window.
    • download - повертати рядок RTF документу чи завантажити його, логічне значення. true - завантажува RTF документ, false повернути текст RTF документу.

html необхідно додавати до document щоб деякі елементи отримали відповідні властивості щодо веб-сторінки(width і т.п.).

Якщо Вам потрібно щоб html отримав CSS стилі які задані в поточному елементі тоді параметр newWindow вказуйте false.

function htmlToRTF(html,options){ function stringUnite(s){ var res=''; for(var i=0,c,len=s.length;i<len;i++) res+='\\u'+s.charCodeAt(i)+'?'; return res; } function colorToRtf(h){ if(h==undefined || h=='')h='000000'; if(h.indexOf('rgb')>-1){ var reg=h.match(/\d+/g); return '\\red'+reg[0]+'\\green'+reg[1]+'\\blue'+reg[2]+';'; } var colorName={"aliceblue":"f0f8ff","antiquewhite":"faebd7","aqua":"0ffff","aquamarine":"7fffd4","azure":"f0ffff", "beige":"f5f5dc","bisque":"ffe4c4","black":"000000","blanchedalmond":"ffebcd","blue":"0000ff","blueviolet":"8a2be2","brown":"a52a2a","burlywood":"deb887", "cadetblue":"5f9ea0","chartreuse":"7fff00","chocolate":"d2691e","coral":"ff7f50","cornflowerblue":"6495ed","cornsilk":"fff8dc","crimson":"dc143c","cyan":"00ffff", "darkblue":"00008b","darkcyan":"008b8b","darkgoldenrod":"b8860b","darkgray":"a9a9a9","darkgreen":"006400","darkkhaki":"bdb76b","darkmagenta":"8b008b","darkolivegreen":"556b2f", "darkorange":"ff8c00","darkorchid":"9932cc","darkred":"8b0000","darksalmon":"e9967a","darkseagreen":"8fbc8f","darkslateblue":"483d8b","darkslategray":"2f4f4f","darkturquoise":"00ced1", "darkviolet":"9400d3","deeppink":"ff1493","deepskyblue":"00bfff","dimgray":"696969","dodgerblue":"1e90ff", "firebrick":"b22222","floralwhite":"fffaf0","forestgreen":"228b22","fuchsia":"ff00ff", "gainsboro":"dcdcdc","ghostwhite":"f8f8ff","gold":"ffd700","goldenrod":"daa520","gray":"808080","green":"008000","greenyellow":"adff2f", "honeydew":"f0fff0","hotpink":"ff69b4", "indianred ":"cd5c5c","indigo":"4b0082","ivory":"fffff0","khaki":"f0e68c", "lavender":"e6e6fa","lavenderblush":"fff0f5","lawngreen":"7cfc00","lemonchiffon":"fffacd","lightblue":"add8e6","lightcoral":"f08080","lightcyan":"e0ffff","lightgoldenrodyellow":"fafad2", "lightgrey":"d3d3d3","lightgreen":"90ee90","lightpink":"ffb6c1","lightsalmon":"ffa07a","lightseagreen":"20b2aa","lightskyblue":"87cefa","lightslategray":"778899","lightsteelblue":"b0c4de", "lightyellow":"ffffe0","lime":"00ff00","limegreen":"32cd32","linen":"faf0e6", "magenta":"ff00ff","maroon":"800000","mediumaquamarine":"66cdaa","mediumblue":"0000cd","mediumorchid":"ba55d3","mediumpurple":"9370d8","mediumseagreen":"3cb371","mediumslateblue":"7b68ee", "mediumspringgreen":"00fa9a","mediumturquoise":"48d1cc","mediumvioletred":"c71585","midnightblue":"191970","mintcream":"f5fffa","mistyrose":"ffe4e1","moccasin":"ffe4b5", "navajowhite":"ffdead","navy":"000080", "oldlace":"fdf5e6","olive":"808000","olivedrab":"6b8e23","orange":"ffa500","orangered":"ff4500","orchid":"da70d6", "palegoldenrod":"eee8aa","palegreen":"98fb98","paleturquoise":"afeeee","palevioletred":"d87093","papayawhip":"ffefd5","peachpuff":"ffdab9","peru":"cd853f","pink":"ffc0cb","plum":"dda0dd","powderblue":"b0e0e6","purple":"800080", "rebeccapurple":"663399","red":"ff0000","rosybrown":"bc8f8f","royalblue":"4169e1", "saddlebrown":"8b4513","salmon":"fa8072","sandybrown":"f4a460","seagreen":"2e8b57","seashell":"fff5ee","sienna":"a0522d","silver":"c0c0c0","skyblue":"87ceeb","slateblue":"6a5acd","slategray":"708090","snow":"fffafa","springgreen":"00ff7f","steelblue":"4682b4", "tan":"d2b48c","teal":"008080","thistle":"d8bfd8","tomato":"ff6347","turquoise":"40e0d0", "violet":"ee82ee", "wheat":"f5deb3","white":"ffffff","whitesmoke":"f5f5f5", "yellow":"ffff00","yellowgreen":"9acd32"}; if(colorName[h]!=undefined)h=colorName[h]; h=h.replace('#',''); var r=parseInt(h.substring(0,2),16), g=parseInt(h.substring(2,4),16), b=parseInt(h.substring(4,6),16); return '\\red'+r+'\\green'+g+'\\blue'+b+';'; } function pxToPt2(px){return Math.ceil(parseInt(px)*0.75)*2;} function getColor(c){ c=colorToRtf(c); var r=colors.indexOf(c); if(r>-1)return r+1; else return colors.push(c); } function getFont(f){ var r=-1; for(var i=0;i<fonts.length;i++) if(fonts[i].indexOf(f)>-1){ r=i;break; } if(r>-1)return r; else return fonts.push('{\\f'+fonts.length+' '+f+';}')-1; } function listRTF(type){ switch(type){ case 'none': return '';break; case 'square': return '\\u9632?';break; case 'circle': return '\\u9675?';break; case 'disk': default: return '\\u8226?';break; } } function forNodes(el){ function setRTFstyle(){ if(css['fontWeight']=='bold')res+='\\b'; if(css['fontStyle']=='italic')res+='\\i'; if(css['textDecoration']=='underline')res+='\\ul'; if(css['textDecoration']=='line-through')res+='\\strike'; if(css['textDecoration']=='double')res+='\\uldb'; if(css['vertical-align']=='super')res+='\\super'; if(css['vertical-align']=='sub')res+='\\sub'; res+='\\cb'+getColor(css['backgroundColor'])+'\\cf'+getColor(css['color'])+'\\f'+getFont(css['fontFamily'])+'\\fs'+pxToPt2(css['fontSize']); } var res='', css; for(var i=0,len=el.childNodes.length;i<len;i++){ if(el.childNodes[i].nodeType==3){ res+=stringUnite(el.childNodes[i].textContent); }else{ css=getComputedStyle(el.childNodes[i]); switch(el.childNodes[i].tagName){ case 'STYLE': case 'SCRIPT': continue; break; case 'HR': res+='{\\par\\brdrb\\brdrs\\par}'; break; case 'BR': res+='\\line'; break; case 'A': res+='{\\field\\cf'+getColor(css['color'])+'\\f'+getFont(css['fontFamily'])+'\\fs'+pxToPt2(css['fontSize'])+'{\\fldinst HYPERLINK "'+stringUnite(el.childNodes[i].href)+'"}{\\fldrslt {\\ul'+ forNodes(el.childNodes[i])+'}}}'; break; case 'TABLE': res+='\n{\\par'+forNodes(el.childNodes[i])+'\\par}'; break; case 'TR': res+='\n\\trowd'; var td=el.childNodes[i].children; for(var j=0,w=0;j<td.length;j++){ w+=Math.ceil(td[j].offsetWidth)*15; if(getComputedStyle(td[j])['borderTopStyle']!='none')res+='\\clbrdrt\\brdrs\\clbrdrr\\brdrs\\clbrdrb\\brdrs\\clbrdrl\\brdrs'; res+='\\cellx'+w;} res+=forNodes(el.childNodes[i]); res+='\\row'; break; case 'TH': case 'TD': res+='\\pard\\intlb{'; setRTFstyle(); res+=forNodes(el.childNodes[i])+'}\\cell'; break; case 'UL': list.push('{\\list\\listtemplateid'+(list.length+1)+'{\\listlevel\\levelnfc23\\levelstartat1{\\leveltext \\\'01'+listRTF(el.childNodes[i].type)+';}\\listid'+(list.length+1)+'}\\li707}'); list2.push('{\\listoverride\\listid'+(list2.length+1)+'\\listoverridecount0\\ls'+(list2.length+1)+'}'); res+='\n\\par\\pard\\paint\\li'+(parseInt(css['paddingLeft'])*15)+'{'+forNodes(el.childNodes[i])+'\\par}'; break; case 'OL': list.push('{\\list\\listtemplateid'+(list.length+1)+'{\\listlevel\\levelnfc0\\levelstartat1{\\leveltext \\\'02\\\'00.;}{\\levelnumbers\\\'01;}\\listid'+(list.length+1)+'}\\li707}'); list2.push('{\\listoverride\\listid'+(list2.length+1)+'\\listoverridecount0\\ls'+(list2.length+1)+'}'); res+='\n\\par\\pard\\paint\\li'+(parseInt(css['paddingLeft'])*15)+'{'+forNodes(el.childNodes[i])+'\\par}'; break; case 'LI': res+='\\par\\pard\\paint\\ls'+list.length+'\\li500{'+forNodes(el.childNodes[i])+'}'; break; default: if(css['display']=='block'){ res+='\n\\par\\plain'; switch(css['text-align']){ case 'justify': res+='\\qj'; break; case 'center': res+='\\qc'; break; case 'right': res+='\\qr'; break; case 'left': default: res+='\\ql'; break; } if(parseInt(css['padding-left'])>0)res+='\\li'+(parseInt(css['padding-left'])*15); } res+='{'; setRTFstyle(); res+=forNodes(el.childNodes[i])+'}'; break; } } } return res; } if(options==undefined)options={}; var rtf='', colors=[], fonts=[], list=[], list2=[], div=document.createElement('div'); div.innerHTML=html; var w=window; if(options.newWindow==true){ w=window.open('about:blank'); if(w){ w.document.write('<!--DOCTYPE html-->\n<html><head><meta charset="utf-8"><title>Збереження RTF документу</title></head><body></body></html>'); }else w=window; } w.document.body.appendChild(div); rtf=forNodes(div); if(w==window)w.document.body.removeChild(div); else w.close(); rtf='{\\rtf1\n{\\colortbl;'+colors.join('')+'}\n{\\fonttbl;'+fonts.join('')+'}'+(list.lengt>0?'\n{\\listtable'+list.join('')+'}\n{\\listoverridetable'+list2.join('')+'}':'')+'\n'+rtf+'\n}'; if(options.download==true){ var type='text/rtf'; if('application/rtf' in navigator.mimeTypes)type='application/rtf'; rtf='data:'+type+';filename=download.rtf,'+encodeURIComponent(rtf); w.location.href=rtf; }else return rtf; } htmlToRTF('<h1 style="color:#3d3e4a;font-size:32pt;font-family:Coming Soon;text-align:center">HTML to RTF - JavaScript</h1><p>Приклад перетворення HTML у RTF.</p><p style="text-align:right">Веб-сайт: <a href="http://xn--80adth0aefm3i.xn--j1amh/">яваскрипт.укр</a></p>',{download:true}); //htmlToRTF(document.body.innerHTML,{download:true}); //alert( htmlToRTF('<p>Конвертація <b>HTML</b> у <b>RTF</b>.</p>') );
Адмін 2017-12-21 15:55:56

Тільки зареєстровані користувачі можуть писати коментарі.