javascript - 将html表格导出到一列上有tinymce的word

标签 javascript jquery html laravel tinymce

我有一个 HTML View ,想要将包含 tinymce 的表格内容导出到 Microsoft Word 甚至 Microsoft Excel。 但是当我将其导出到Word时,我在Word文件中得到了文本区域,而不仅仅是列的文本。

提前致谢。

我的word文件: enter image description here

我的 HTML View : enter image description here

function export2Word(element) {

  var html, link, blob, url, css;

  css = (
    '<style>' +
    '@page WordSection1{size: 21cm 29.7cm;}' +
    'div.WordSection1 {page: WordSection1;}' +
    '</style>'
  );

  html = element.innerHTML;
  blob = new Blob(['\ufeff', css + html], {
    type: 'application/msword'
  });
  url = URL.createObjectURL(blob);
  link = document.createElement('A');
  link.href = url;
  link.download = 'Document'; // default name without extension
  document.body.appendChild(link);
  if (navigator.msSaveOrOpenBlob) navigator.msSaveOrOpenBlob(blob, 'Document.doc'); // IE10-11
  else link.click(); // other browsers
  document.body.removeChild(link);
};
<body dir="rtl">
  <button onclick="export2Word(window.docx)">Export</button>

  <br>
  <div id="docx">
    <div class="WordSection1" dir="rtl">
      <table width="95%" border="1" align="center" style="text-align: center" id="testtable">

        <thead>
          <tr>
            <td colspan="2" style="width: 10%">شهرت دریور</td>
            <td rowspan="2" style="width: 10%">نوع واسطه</td>
            <td rowspan="2" style="width: 10%">نمبر پلیت</td>
            <td rowspan="2" style="width: 10%">نمبر پارچه عوارض</td>
            <td rowspan="2" style="width: 25%;height: 90%">تثبیت عوارض</td>
            <td rowspan="2" style="width: 10%">تاریخ تثبیت</td>
            <td rowspan="2">شماره حکم</td>
            <td rowspan="2">شماره صادر</td>
            <td rowspan="2">پرزه جات خریداری شده</td>
            <td rowspan="2">تعداد</td>
            <td rowspan="2">قیمت فی واحد</td>
            <td rowspan="2" style="text-wrap:inherit">قیمت عمومی</td>
            <td rowspan="2">تاریخ</td>
            <td rowspan="2">ملاحظات</td>
          </tr>
          <tr>
            <td>اسم</td>
            <td>ولد</td>
          </tr>
        </thead>
        <tbody>
          @foreach($result as $a=>$row)
          <tr>
            <td id="">{{$row->driver_name}}</td>
            <td id="">{{$row->father_name}}</td>
            <td id="">{{$row->vehicle_type}}</td>
            <td id="">{{$row->plate_no}}</td>
            <td id="">{{$row->serial_number}}</td>
            <td><textarea class="checkkkkk" id="ddd{{$bbb}}">{{$row->description}}</textarea>
            </td>
            <td id="asdf{{$aaa}}">
              <script type="text/javascript">
                $(document).ready(function() {
                  $("#asdf" + {
                    {
                      $aaa
                    }
                  } + "").text(moment("{{$row->created_at}}").format('jYYYY/jM/jD'));
                });
              </script>
              {{$aaa++}}
            </td>
            <td id="">{{$row->order_number}}</td>
            <td id="">{{$row->export_number}}</td>
            <td>{{$row->buy_parts}}</td>
            <td id="">{{$row->quantity}}</td>
            <td id="">{{$row->per_item_price}}</td>
            <td id="">{{$row->total_price}}</td>
            <td id="">{{$row->export_date}}</td>
            <td id="">{{$row->remarks}}</td>
          </tr>

          @endforeach
        </tbody>
      </table>
    </div>
  </div>
</body>

或者是否有任何 javascript 库即使使用tinymce也可以做到这一点

最佳答案

Follow this instruction for export Doc with Excel file
http://localhost/tableToDoc.php?rType=1&fName=test
-Copy this code and see
- First of all create the table by Microsoft office then go to 'Preview in Web Browser' then Ctrl+u. Copy this source code and past your html page. you can change this source code.


<!DOCTYPE html>
<html lang="bn">
<?php 
        $repFor = $_GET['rType'];   
        $fileName = $_GET['fName'];
        header("Content-type: application/vnd.ms-word");
        if($repFor == '1'){ // 2 = Export excel file
        header("Content-Disposition: attachment;Filename=".$fileName.".xls");
        }
        if($repFor == '2'){ // 3 = Export word file    
        header("Content-Disposition: attachment;Filename=".$fileName.".doc");    
        }
        echo "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=Windows-1252\">";
?>
<head>
    <title>HTML Table to xls and doc file export</title>
    <style type="text/css">
        @page {
            size: landscape;
        }
        .tblBorder{
            border-top: 1px solid #000000; 
            border-bottom: 1px solid #000000; 
            border-left: 1px solid #000000; 
            border-right: none; 
            padding-top: 0.04in; 
            padding-bottom: 0.04in; 
            padding-left: 0.04in; 
            padding-right: 0in
        }
        .tblBorder2{
            border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: none; padding-top: 0in; padding-bottom: 0.04in; padding-left: 0.04in; padding-right: 0in
        }
    </style>
</head>

<body lang="en-US" dir="ltr">
<table width="100%" cellpadding="4" cellspacing="0">
    <tr valign="top">
        <td rowspan="2" width="17%" class="tblBorder">
            <p align="center">Name</p>
        </td>
        <td rowspan="2" width="17%" class="tblBorder">
            <p align="center">Website</p>
        </td>
        <td rowspan="2" width="17%" class="tblBorder">
            <p align="center">Sub-Table</p>
        </td>
        <td rowspan="2" width="17%" class="tblBorder">
            <p align="center">Subject</p>
        </td>
        <td colspan="2" width="33%" style="border: 1px solid #000000; padding: 0.04in">
            <p align="center">Group</p>
        </td>
    </tr>
    <tr valign="top">
        <td width="17%" class="tblBorder2">
            <p align="center">Science</p>
        </td>
        <td width="17%" style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; padding-top: 0in; padding-bottom: 0.04in; padding-left: 0.04in; padding-right: 0.04in">
            <p align="center">Arts</p>
        </td>
    </tr>
    <tr valign="top">
        <td width="17%" class="tblBorder2">
            Bulbul
        </td>
        <td width="17%" class="tblBorder2">
            bdprescription.com
        </td>
        <td width="17%" class="tblBorder2">
            <div>
            <table width="100%">
                <tr>
                    <td class="tblBorder">Sub-Table</td>
                    <td class="tblBorder">Sub-Table</td>
                </tr>
                <tr>
                    <td class="tblBorder">Sub-Table</td>
                    <td class="tblBorder">Sub-Table</td>
                </tr>
            </table>
        </div>
        </td>
        <td width="17%" class="tblBorder2">
            Match
        </td>
        <td width="17%" class="tblBorder2">
            Yes
        </td>
        <td width="17%" style="border-top: none; border-bottom: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; padding-top: 0in; padding-bottom: 0.04in; padding-left: 0.04in; padding-right: 0.04in">
            No
        </td>
    </tr>
</table>
</body>
</html>

关于javascript - 将html表格导出到一列上有tinymce的word,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57034288/

相关文章:

javascript - 如何在 jquery 中使两个计数器按钮相互独立?

javascript - 匹配来自单个正则表达式的文件名和文件扩展名

在 html 中显示 Javascript 数组值

javascript - 是否可以自动打开视频模式并仅在用户通过电子邮件中的链接访问页面时才开始播放?

javascript - 使用 jQuery 编写 OO Javascript

jquery - Kendo ui 窗口是否有任何事件获得焦点?

HTML 到 PPT 转换 .Net 库

javascript - 通过 append 方法插入的 html 上的单击事件

javascript - 以日期格式设置工具提示 Highchart

javascript - 处理来自多个来源的响应错误