將 Html + Blob 圖像下載為文本

Question

我需要將 html 代碼保存為文本文件（最好是 MS word），其簽名表示為 blob（用 HTML5 Canvas 繪制）。

我嘗試了這個解決方案，但不幸的是，下載的文件與 html 標簽一起出現，並且不會將 blob 呈現為圖像。

JSfiddle

JS代碼：

 window.export.onclick = function() {

   if (!window.Blob) {
      alert('Your legacy browser does not support this action.');
      return;
   }

   var html, link, blob, url, css;

   // EU A4 use: size: 841.95pt 595.35pt;
   // US Letter use: size:11.0in 8.5in;

   css = (
     '<style>' +
     '@page WordSection1{size: 841.95pt 595.35pt;mso-page-orientation: landscape;}' +
     'div.WordSection1 {page: WordSection1;}' +
     'table{border-collapse:collapse;}td{border:1px gray solid;width:5em;padding:2px;}'+
     '</style>'
   );

   html = window.docx.innerHTML;
   blob = new Blob(['\ufeff', html], {
     type: 'application/msword'
   });
   url = URL.createObjectURL(blob);
   link = document.createElement('A');
   link.href = url;
   // Set default file name. 
   // Word will append file extension - do not add an extension here.
   link.download = 'Document';   
   document.body.appendChild(link);
   if (navigator.msSaveOrOpenBlob ) navigator.msSaveOrOpenBlob( blob, 'Document.doc'); // IE10-11
        else link.click();  // other browsers
   document.body.removeChild(link);
 };

Answer 1

我需要將 html 代碼保存為文本文件（最好是 MS word），其簽名表示為 blob（用 HTML5 Canvas 繪制）。

我嘗試了這個解決方案，但不幸的是，下載的文件與 html 標簽一起出現，並且不會將 blob 呈現為圖像。

JSfiddle

JS代碼：

 window.export.onclick = function() {

   if (!window.Blob) {
      alert('Your legacy browser does not support this action.');
      return;
   }

   var html, link, blob, url, css;

   // EU A4 use: size: 841.95pt 595.35pt;
   // US Letter use: size:11.0in 8.5in;

   css = (
     '<style>' +
     '@page WordSection1{size: 841.95pt 595.35pt;mso-page-orientation: landscape;}' +
     'div.WordSection1 {page: WordSection1;}' +
     'table{border-collapse:collapse;}td{border:1px gray solid;width:5em;padding:2px;}'+
     '</style>'
   );

   html = window.docx.innerHTML;
   blob = new Blob(['\ufeff', html], {
     type: 'application/msword'
   });
   url = URL.createObjectURL(blob);
   link = document.createElement('A');
   link.href = url;
   // Set default file name. 
   // Word will append file extension - do not add an extension here.
   link.download = 'Document';   
   document.body.appendChild(link);
   if (navigator.msSaveOrOpenBlob ) navigator.msSaveOrOpenBlob( blob, 'Document.doc'); // IE10-11
        else link.click();  // other browsers
   document.body.removeChild(link);
 };