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

97

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

javascript jquery export-to-excel code511788465541441
источник
9
Самый простой способ - это, вероятно, экспортировать HTML-документ, который может открыть Excel.
Pekka
@Pekka Я пробовал это, он теряет все форматирование / css / размер столбца и т. Д.
code511788465541441 02
3
@user где вы объявляете размеры столбцов и тому подобное? Я не очень хорошо знаком с экспортом данных в Excel, но вам может потребоваться объявить их встроенными, то есть<td style="background-color: ...
Пекка
@user - здесь есть как минимум две разные проблемы: 1) форматирование данных, чтобы они правильно отображались в Excel, и 2) экспорт данных с использованием Javascript, чтобы он правильно установил тип mime, предлагая пользователю сохранить файл . Вы пытаетесь решить обе эти проблемы?
nrabinowitz
10
Почему это считалось «основанным на мнении»? Это очень простой технический вопрос.
brandizzi

Ответы:

75

Несомненно, самый чистый и простой экспорт из таблиц в 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"
        }
    } );
} );

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

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

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

bpeterson76
источник
2
DataTables полностью написан на Javascript. Просто элемент TableTools использует Flash, и он крошечный. Я НИКОГДА не буду использовать Flash в своих продуктах!
bpeterson76
16
Я понимаю и согласен. Но все же - пусть даже и крохотный - там есть объект .swf, и он не может работать без Flash.
magma
8
Такое прекрасное решение, но такой позор, что ему нужен Flash.
jnthnclrk
Здравствуйте, вы можете показать полный пример, я слишком новичок, чтобы заставить его работать без примера!
NoobTom
1
@PramodGaikwad, нет, Datatables заменит NG-table. По сути, они обладают той же функциональностью, но Datatables намного более зрелый и имеет гораздо больше функций. Есть дополнительный продукт Datatables, созданный специально для Angular: l-lin.github.io/angular-datatables/#/welcome
bpeterson76
42

Давным-давно я обнаружил, что 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
источник
11
Все заработало, добавив в конце замену: window.open ('data: application / vnd.ms-excel,' + document.getElementById ('table'). OuterHTML.replace (/ / g, '% 20')) ;
VSP
6
Альтернативный способ (рекомендуется): window.open ('data: application / vnd.ms-excel,' + encodeURIComponent (document.getElementById ('table'). OuterHTML));
VSP
5
Отлично работает в firefox, оберните таблицу в div, а затем вызовите идентификатор с помощью, document.getElementById('id').innerHTMLчтобы выборочно захватить только таблицу, в противном случае все ваши данные будут экспортированы в электронную таблицу. Не работает в старом IE, просто открывает новое окно со всем html в заголовке
Абрахам Брукс
1
Это простое решение отлично работает. Посмотрите на этот повторяющийся вопрос, чтобы иметь возможность установить имя файла, а также установить имя рабочего листа. Одинаковый тип решения; stackoverflow.com/questions/17126453/…
Эспен Шульстад,
2
Это больше не работает в Office 365 из-за более строгих мер безопасности. Файл Excel должен быть ИСТИННЫМ документом Excel, иначе при открытии будет выдана ошибка.
Фил
12

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

  1. Откройте Excel и создайте рабочий лист с желаемым форматированием и цветами.
  2. Сохраните книгу Excel как «Таблица XML 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);
    


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

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

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

Samshull
источник
Хотя использовать OpenXML приятно, это решение не будет работать с таблицами с colspans или rowspans без большой работы над генератором javascript
Эдуардо Молтени
1
Спасибо за то, что научили меня чему-то, а не сказали мне использовать плагин, очень признательны. Стоит отметить, что этот подход хорошо работает и сегодня.
Бенджамин Грюнбаум
Интересно, пробовал такой подход. Я просто получаю весь <? 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: Таблица> значения с моими строками, записанными в одну ячейку, включая все строки в одной ячейке. Что мне не хватает?
CromeX 08
6

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

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

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

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

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

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

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

HAL 9000
источник
Это не сработает, если URL-адрес находится за стеной входа.
Ахшар
Он действительно работает с базовой аутентификацией, а также с аутентификацией на основе форм, но с последней вам, возможно, придется нажать на «редактировать запрос», чтобы повторно ввести учетные данные и получить новый файл cookie со временем
HAL 9000
5

Это 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
источник
5

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

Open XML

Томас
источник
4

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

Павлонатор
источник
2

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

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

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

Аарон Дигулла
источник
2

Этот код является только 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>
Голый
источник
Я попытался использовать этот код, он действительно открыл таблицу в Excel, но неправильный формат выглядит так, как будто он просто скопировал код html в таблицы. вот так: <TD class = "" bgColor = # ed9fff> SARTIN, DAN </TD> <TD class = "" bgColor = # ed9fff> BALAEZ, BARBARA </TD> Есть предложения?
Fahad
Это потому, что он использовал innerHTML. Элемент, который он получает, ЯВЛЯЕТСЯ таблицей, поэтому он должен быть externalHTML. Я внес правку
user1566694
Я получаю сообщение об ошибке: «Сервер автоматизации не может создать объект» при создании ActiveXObject. Как я могу это исправить?
Nk SP
2

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

  1. данный URL

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

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

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

код python, который открывает окно ie и имеет к нему доступ: переменная url содержит 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

Павлонатор
источник
1

простой поиск Google показал это:

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

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

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

SQueryL
источник
1

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

OpenXML SDK для JavaScript.

https://openxmlsdkjs.codeplex.com/

Эрик Хартфорд
источник
хммм, скачал и попытался запустить примеры в последней версии chrome, только что получил ошибки :(
Джош Мак,
0

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

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

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

сра
источник
Не могли бы вы, проголосовавшие против, прокомментировать причину голосования против?
sra
0 
   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, '');
   }
Самех эль-Бехайри
источник