Розглянемо конвертацію 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>') );