Вопрос:

Как я могу экспортировать таблицы в Excel с веб-страницы

javascript jquery export-to-excel

271429 просмотра

14 ответа

9045 Репутация автора

Как я могу экспортировать таблицы в Excel с веб-страницы. Я хочу, чтобы экспорт содержал все форматирование и цвета.

Автор: code511788465541441 Источник Размещён: 02.04.2011 03:47

Ответы (14)


5 плюса

539 Репутация автора

Это php, но вы можете изменить его на javascript:

<?php>
$colgroup = str_repeat("<col width=86>",5);
$data = "";
$time = date("M d, y g:ia");
$excel = "<html xmlns:o=\"urn:schemas-microsoft-com:office:office\" xmlns:x=\"urn:schemas-microsoft-com:office:excel\" xmlns=\"http://www.w3.org/TR/REC-html40\">
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html>
<head>
<meta http-equiv=\"Content-type\" content=\"text/html;charset=utf-8\" />
<style id=\"Classeur1_16681_Styles\">
.xl4566 {
color: red;
}
</style>
</head>
<body>
<div id=\"Classeur1_16681\" align=center x:publishsource=\"Excel\">
<table x:str border=0 cellpadding=0 cellspacing=0 style=\"border-collapse: collapse\">
<colgroup>$colgroup</colgroup>
<tr><td class=xl2216681><b>Col1</b></td><td class=xl2216681><b>Col2</b></td><td class=xl2216681 ><b>Col3</b></td><td class=xl2216681 ><b>Col4</b></td><td class=xl2216681 ><b>Col5</b></td></tr>
<tr><td class=xl4566>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
</table>
</div>
</body>
</html>";
  $fname = "Export".time().".xls";
  $file = fopen($fname,"w+");
  fwrite($file,$excel);
  fclose($file);
  header('Content-Type: application/vnd.ms-excel');
  header('Content-Disposition: attachment; filename="'.basename($fname).'"');
  readfile($fname);
  unlink($fname); ?>    
Автор: RedSoxFan Размещён: 02.04.2011 04:05

2 плюса

259492 Репутация автора

На самом деле это проще, чем вы думаете: просто скопируйте таблицу HTML (то есть код HTML для таблицы) в буфер обмена. Excel знает, как декодировать HTML-таблицы; он даже попытается сохранить атрибуты.

Сложная часть - «скопировать таблицу в буфер обмена», поскольку не существует стандартного способа доступа к буферу обмена из JavaScript. Смотрите этот пост в блоге: Доступ к системному буферу обмена с помощью JavaScript - Святой Грааль?

Теперь все, что вам нужно, это таблица в формате HTML. Я предлагаю jQuery и метод html () .

Автор: Aaron Digulla Размещён: 21.04.2011 08:28

0 плюса

22758 Репутация автора

Есть два практических способа сделать это автоматически, в то время как во всех браузерах можно использовать только одно решение. Прежде всего вы должны использовать спецификацию open xml для создания листа Excel. Доступны бесплатные плагины от Microsoft, которые делают этот формат доступным и для старых офисных версий. Open xml является стандартным начиная с Office 2007. Два способа очевидны на стороне сервера или на стороне клиента.

Клиентская реализация использует новый стандарт CSS, который позволяет хранить данные, а не только URL-адрес данных. Это отличный подход, потому что вам не нужны никакие обращения к серверу, только данные и немного JavaScript. Недостатком убийства является то, что Microsoft не поддерживает все его части в текущих версиях IE (я не знаю о IE9). Microsoft ограничивает данные изображениями, но нам нужен документ. В Firefox это работает довольно хорошо. Для меня IE был точкой убийства.

Другой способ заключается в использовании серверной реализации. Должно быть много реализаций открытого XML для всех языков. Вам просто нужно схватить один. В большинстве случаев это будет самый простой способ изменить Viewmodel для получения документа, но вы наверняка сможете отправить все данные с клиентской стороны обратно на сервер и сделать то же самое.

Автор: sra Размещён: 22.04.2011 09:17

2 плюса

31186 Репутация автора

Этот код предназначен только для IE, поэтому он полезен только в тех случаях, когда вы знаете, что все ваши пользователи будут использовать IE (как, например, в некоторых корпоративных средах).

<script Language="javascript">
function ExportHTMLTableToExcel()
{
   var thisTable = document.getElementById("tbl").innerHTML;
   window.clipboardData.setData("Text", thisTable);
   var objExcel = new ActiveXObject ("Excel.Application");
   objExcel.visible = true;

   var objWorkbook = objExcel.Workbooks.Add;
   var objWorksheet = objWorkbook.Worksheets(1);
   objWorksheet.Paste;
}
</script>
Автор: NakedBrunch Размещён: 22.04.2011 06:57

11 плюса

2248 Репутация автора

Можно использовать старый формат Excel 2003 XML (до OpenXML) для создания строки, содержащей желаемый XML, затем на стороне клиента вы можете использовать URI данных, чтобы открыть файл с использованием mime-типа XSL, или отправить файл. клиенту, используя mime-тип Excel «Content-Type: application / vnd.ms-excel» со ​​стороны сервера.

  1. Откройте Excel и создайте лист с желаемым форматированием и цветами.
  2. Сохраните книгу Excel как «XML Spreadsheet 2003 (* .xml)»
  3. Откройте полученный файл в текстовом редакторе, таком как блокнот, и скопируйте значение в строку в вашем приложении.
  4. Предполагая, что вы используете подход на стороне клиента с данными URI, код будет выглядеть так:
    
    <script type="text/javascript">
    var worksheet_template = '<?xml version="1.0"?><ss:Workbook xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">'+
                 '<ss:Styles><ss:Style ss:ID="1"><ss:Font ss:Bold="1"/></ss:Style></ss:Styles><ss:Worksheet ss:Name="Sheet1">'+
                 '<ss:Table>{{ROWS}}</ss:Table></ss:Worksheet></ss:Workbook>';
    var row_template = '<ss:Row ss:StyleID="1"><ss:Cell><ss:Data ss:Type="String">{{name}}</ss:Data></ss:Cell></ss:Row>';
    </script>
    
    
  5. Затем вы можете использовать замену строки, чтобы создать коллекцию строк для вставки в шаблон листа
    
    <script type="text/javascript">
    var rows = document.getElementById("my-table").getElementsByTagName('tr'),
      row_data = '';
    for (var i = 0, length = rows.length; i < length; ++i) {
    row_data += row_template.replace('{{name}}', rows[i].getElementsByTagName('td')[0].innerHTML);
    }
    </script>
    
    
  6. Как только вы соберете информацию, создайте последнюю строку и откройте новое окно, используя URI данных

    
    <script type="text/javascript">
    var worksheet = worksheet_template.replace('{{ROWS}}', row_data);<p></p>
    
    

    window.open('data:application/vnd.ms-excel,'+worksheet); </script>

Стоит отметить, что старые браузеры не поддерживают схему URI данных, поэтому вам может потребоваться создать сторону файлового сервера для тех браузеров, которые ее не поддерживают.

Вам также может потребоваться выполнить кодирование base64 для содержимого URI данных, для чего может потребоваться библиотека js , а также добавление строки «; base64» после типа mime в URI данных.

Автор: samshull Размещён: 25.04.2011 04:16

74 плюса

12118 Репутация автора

Самым чистым и простым способом экспорта из таблиц в Excel является плагин Jquery DataTables Table Tools. Вы получаете сетку, которая сортирует, фильтрует, упорядочивает и обрабатывает ваши данные, и, добавив всего несколько дополнительных строк кода и два небольших файла, вы получаете экспорт в Excel, PDF, CSV, в буфер обмена и на принтер.

Это весь код, который требуется:

  $(document).ready( function () {
    $('#example').dataTable( {
        "sDom": 'T<"clear">lfrtip',
        "oTableTools": {
            "sSwfPath": "/swf/copy_cvs_xls_pdf.swf"
        }
    } );
} );

Таким образом, быстрое развертывание, отсутствие ограничений браузера, не требуется серверный язык и, что самое главное, очень просто для понимания. Это беспроигрышный. Единственное, на что он имеет ограничения, - это строгое форматирование столбцов.

Если форматирование и цветопередача являются абсолютными препятствиями, единственный найденный мною надежный кросс-браузерный метод - это использование серверного языка для обработки правильных файлов Excel из вашего кода. Мое решение - PHPExcel. Это единственное решение, которое я нашел до сих пор, которое положительно обрабатывает экспорт с форматированием в СОВРЕМЕННУЮ версию Excel из любого браузера, когда вы предоставляете ему только HTML. Позвольте мне прояснить, что это определенно не так просто, как первое решение, и это тоже немного ресурсов. Однако, с другой стороны, он также может выводить напрямую в PDF. И, как только вы настроите его, он будет работать каждый раз.

ОБНОВЛЕНИЕ - 15 сентября 2016 г .: TableTools был прекращен в пользу нового плагина под названием « кнопки ». Эти инструменты выполняют те же функции, что и старое расширение TableTools, но их гораздо проще установить, и они используют загрузки HTML5 для современных браузеров, с возможностью возврата к исходной загрузке Flash для браузеров, которые не поддерживают стандарт HTML5. Как вы можете видеть из многих комментариев, так как я опубликовал этот ответ в 2011 году, основной недостаток TableTools был устранен. Я все еще не могу рекомендовать DataTables достаточно для простой обработки больших объемов данных, как для разработчика, так и для пользователя.

Автор: bpeterson76 Размещён: 25.04.2011 02:00

1 плюс

130 Репутация автора

простой поиск в Google нашел это:

Если данные на самом деле являются HTML-страницей и НЕ были созданы ASP, PHP или каким-либо другим языком сценариев, и вы используете Internet Explorer 6, и на вашем компьютере установлен Excel, просто щелкните правой кнопкой мыши страницу и посмотрите через меню. Вы должны увидеть «Экспорт в Microsoft Excel». Если все эти условия выполняются, нажмите на пункт меню и после нескольких подсказок он будет импортирован в Excel.

если вы не можете сделать это, он дает альтернативный метод «перетаскивания»:

http://www.mrkent.com/tools/converter/

Автор: SQueryL Размещён: 25.04.2011 05:26

5 плюса

57903 Репутация автора

Во-первых, я бы не советовал пытаться экспортировать Html и надеюсь, что экземпляр Excel его заберет. Мой опыт показывает, что это решение чревато проблемами, в том числе несовместимостью с клиентами Macintosh и выдачей пользователю ошибки, что указанный файл не соответствует указанному формату. Наиболее пуленепробиваемое, удобное для пользователя решение - это решение на стороне сервера, где вы используете библиотеку для создания фактического файла Excel и отправки его обратно пользователю. Следующим лучшим и более универсальным решением будет использование формата Open XML. Я столкнулся с несколькими редкими проблемами совместимости со старыми версиями Excel, но в целом это должно дать вам решение, которое будет работать на любой версии Excel, включая Mac.

Открытый XML

Автор: Thomas Размещён: 25.04.2011 07:18

6 плюса

3332 Репутация автора

В Excel есть малоизвестная функция, называемая «веб-запросы», которая позволяет получать данные практически с каждой веб-страницы без дополнительного программирования.

Веб-запрос в основном запускает HTTP-запрос непосредственно из Excel и копирует некоторые или все полученные данные (и, возможно, форматирование) в рабочую таблицу.

После того, как вы определили веб-запрос, вы можете обновить его в любое время, даже не выходя из Excel. Таким образом, вам не нужно «экспортировать» данные и сохранить их в файл - вы бы предпочли обновить данные, как в базе данных.

Вы даже можете использовать параметры URL, если Excel предложит вам указать критерии фильтрации и т. Д.

Однако минусы, которые я заметил до сих пор:

  • динамически загружаемые данные не доступны, потому что Javascript не выполняется
  • Длина URL ограничена

Вот вопрос о том, как создавать веб-запросы в Excel. Он ссылается на сайт справки Microsoft о том, как получить внешние данные с веб-страницы

Автор: HAL 9000 Размещён: 26.04.2011 11:46

41 плюса

19976 Репутация автора

Давным-давно я обнаружил, что Excel откроет файл HTML с таблицей, если мы отправим его с типом содержимого Excel. Рассмотрим документ выше:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Java Friends</title>
</head>
<body>
  <table style="font-weight: bold">
    <tr style="background-color:red"><td>a</td><td>b</td></tr>
    <tr><td>1</td><td>2</td></tr>
  </table>    
</body>
</html>

Я запустил следующий букмарклет на нем:

javascript:window.open('data:application/vnd.ms-excel,'+document.documentElement.innerHTML);

и на самом деле я получил его для загрузки в виде файла Excel. Однако я не получил ожидаемый результат - файл был открыт в OpenOffice.org Writer. Это моя проблема: у меня нет Excel в этой машине, поэтому я не могу попробовать это лучше. Кроме того, этот трюк работал более или менее шесть лет назад со старыми браузерами и античной версией MS Office, поэтому я не могу сказать, будет ли он работать сегодня.

Во всяком случае, в документе выше я добавил кнопку, которая теоретически загружала бы весь документ в виде файла Excel:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>Java Friends</title>
</head>
<body>
  <table style="font-weight: bold">
    <tr style="background-color:red"><td>a</td><td>b</td></tr>
    <tr><td>1</td><td>2</td></tr>
    <tr>
      <td colspan="2">
        <button onclick="window.open('data:application/vnd.ms-excel,'+document.documentElement.innerHTML);">
            Get as Excel spreadsheet
        </button>
      </td>
    </tr>
  </table>    
</body>
</html>

Сохраните его в файл и нажмите на кнопку. Я люблю знать , если он работал или нет, поэтому я прошу Вас прокомментировать даже сказать , что это не работа.

Автор: brandizzi Размещён: 26.04.2011 09:36

2 плюса

700 Репутация автора

Предположения:

  1. данный URL

  2. преобразование должно быть сделано на стороне клиента

  3. системы Windows, Mac и Linux

Решение для Windows:

код Python, который открывает окно ie и имеет к нему доступ: переменная theurl содержит URL ('http: //')

ie = Dispatch("InternetExplorer.Application")
ie.Visible = 1
ie.Navigate(theurl)

Примечание: если страница недоступна напрямую, кроме входа в систему, вам нужно будет обработать это путем ввода данных формы и эмуляции действий пользователя с помощью python

вот пример

from win32com.client import Dispatch
ie.Document.all('username').value=usr
ie.Document.all('password').value=psw

таким же образом для получения данных с веб-страницы. Допустим, элемент с идентификатором 'el1' содержит данные. получить текст элемента в переменную

el1 = ie.Document.all('el1').value

затем, когда данные находятся в переменной python, вы можете открыть экран Excel аналогичным образом, используя python:

from win32com.client import Dispatch
xlApp = Dispatch("Excel.Application")
xlWb = xlApp.Workbooks.Open("Read.xls")
xlSht = xlWb.WorkSheets(1)
xlSht.Cells(row, col).Value = el1

Решение для Mac:

только совет: используйте AppleScript - он имеет простой и похожий API как win32com.client Dispatch

Решение для Linux:

java.awt.Robot может работать для этого, у него есть щелчок, нажатие клавиши (можно использовать горячие клавиши), но ни один API для Linux, о котором я знаю, не может работать так просто, как AppleScript

Автор: Pavlonator Размещён: 27.04.2011 08:34

4 плюса

700 Репутация автора

Mozilla все еще поддерживает базовые 64 URI. Это позволяет вам динамически составлять двоичный контент, используя JavaScript:

<a href="data:application/vnd.ms-excel<base64 encoded binary excel content here>"> download xls</a>

если ваш файл Excel не очень интересный (без диаграмм, формул, макросов), вы можете покопаться в формате и составить байты для вашего файла, затем закодировать их с помощью base64 и вставить в href

обратитесь к https://developer.mozilla.org/en/data_URIs

Автор: Pavlonator Размещён: 27.04.2011 08:46

0 плюса

39 Репутация автора

   function normalexport() {

       try {
           var i;
           var j;
           var mycell;
           var tableID = "tblInnerHTML";
           var drop = document.getElementById('<%= ddl_sections.ClientID %>');
           var objXL = new ActiveXObject("Excel.Application");
           var objWB = objXL.Workbooks.Add();
           var objWS = objWB.ActiveSheet;
           var str = filterNum(drop.options[drop.selectedIndex].text);
           objWB.worksheets("Sheet1").activate; //activate dirst worksheet
           var XlSheet = objWB.activeSheet; //activate sheet
           XlSheet.Name = str; //rename


           for (i = 0; i < document.getElementById("ctl00_ContentPlaceHolder1_1").rows.length - 1; i++) {
               for (j = 0; j < document.getElementById("ctl00_ContentPlaceHolder1_1").rows(i).cells.length; j++) {
                   mycell = document.getElementById("ctl00_ContentPlaceHolder1_1").rows(i).cells(j);

                   objWS.Cells(i + 1, j + 1).Value = mycell.innerText;

                   //                                                objWS.Cells(i + 1, j + 1).style.backgroundColor = mycell.style.backgroundColor;
               }
           }

           objWS.Range("A1", "L1").Font.Bold = true;
           //                objWS.Range("A1", "L1").Font.ColorIndex = 2;
           //                 objWS.Range("A1", "Z1").Interior.ColorIndex = 47;

           objWS.Range("A1", "Z1").EntireColumn.AutoFit();

           //objWS.Range("C1", "C1").ColumnWidth = 50;

           objXL.Visible = true;

       } catch (err) {
           alert("Error. Scripting for ActiveX might be disabled")
           return
       }
       idTmr = window.setInterval("Cleanup();", 1);

   }


   function filterNum(str) {

       return str.replace(/[ / ]/g, '');
   }
Автор: Sameh el Behairy Размещён: 29.03.2012 07:10

1 плюс

10190 Репутация автора

И теперь есть лучший способ.

OpenXML SDK для JavaScript.

https://openxmlsdkjs.codeplex.com/

Автор: Eric Hartford Размещён: 19.12.2013 11:36
Вопросы из категории :
32x32