Проблема создания pdf с таблицами в IE

Question

В настоящее время я использую последнюю версию jspdf и jspdf-AutoTable 2.1.0 последней версии , чтобы создать PDF-файл с очень сложной таблицей.

Он работает как шарм в Chrome и FireFox (большой сюрприз!), Но в IE10, это рендеринг PDF ужасно (еще один большой сюрприз!)

Это выход одного из самых обширных таблиц в формате PDF на хром (в настоящее время пусто)

Это PDF, что IE10 оказывает

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

Чтобы его поддерживать свой собственный стиль таблицы, с его содержанием правильно стайлинг, я настроил и создал свой собственный GetTableJSON метод, так что я могу получить и хранить каждый индивидуальный стиль ячейки и применить его позже на createdHeaderCell и createdCell крючков

Это полный код, который используется для того, чтобы создать этот PDF-файл с его пользовательский стиль

function DownloadSchedulePDF() { 
    var orientation = landscape ? 'l' : 'p' 
    var doc = new jsPDF(orientation, 'pt', paperFormat); 
    doc.text('Header', 40, 50); 
    var res = GetTableJSON($(".scheduleGrid table")); 
    tableCellsStyles = res.styles; 
    doc.autoTable(res.columns, res.data, { 
     theme: 'plain', 
     startY: 60, 
     pageBreak: 'auto', 
     margin: 20, 
     width: 'auto', 
     styles: { 
      lineWidth: 0.01, 
      lineColor: 0, 
      fillStyle: 'DF',    
      halign: 'center', 
      valign: 'middle', 
      columnWidth: 'auto', 
      overflow: 'linebreak' 
     }, 
     createdHeaderCell: function (cell, data) { 
      ApplyCellStyle(cell, "th", data.column.dataKey); 
     }, 
     createdCell: function (cell, data) { 
      ApplyCellStyle(cell, data.row.index, data.column.dataKey); 
     }, 
     drawHeaderCell: function (cell, data) { 
      //ApplyCellStyle(cell, "th", data.column.dataKey); 
      //data.table.headerRow.cells[data.column.dataKey].styles = cell.styles; 
      //ApplyCellStyle(data.table.headerRow.cells[data.column.dataKey], "th", data.column.dataKey); 
     }, 
     drawCell: function (cell, data) { 
      if (cell.raw === undefined) 
       return false; 
      if(cell.raw.indexOf("*") > -1) { 
       var text = cell.raw.split("*")[0]; 
       var times = cell.raw.split("*")[1]; 
       doc.rect(cell.x, cell.y, cell.width, cell.height * times, 'FD'); 
       doc.autoTableText(text, cell.x + cell.width/2, cell.y + cell.height * times/2, { 
        halign: 'center', 
        valign: 'middle' 
       }); 
       return false; 
      } 
     } 
    }); 
    doc.save("schedule " + selectedDate.toLocaleDateString() + ".pdf"); 
} 

function ApplyCellStyle(cell, x, y) { 
    if(!pdfInColor) 
     return; 
    var styles = tableCellsStyles[x + "-" + y]; 
    if (styles === undefined) 
     return; 
    cell.styles.cellPadding = styles.cellPadding 
    cell.styles.fillColor = styles.fillColor; 
    cell.styles.textColor = styles.textColor; 
    cell.styles.font = styles.font; 
    cell.styles.fontStyle = styles.fontStyle; 
} 

Object.vals = function (o) { 
    return Object.values 
    ? Object.values(o) 
    : Object.keys(o).map(function (k) { return o[k]; }); 
} 
// direct copy of the plugin method adjusted in order to retrieve and store each cell style 
function GetTableJSON (tableElem, includeHiddenElements) { 
    includeHiddenElements = includeHiddenElements || false; 

    var columns = {}, rows = []; 

    var cellsStyle = {}; 

    var header = tableElem.rows[0]; 

    for (var k = 0; k < header.cells.length; k++) { 
     var cell = header.cells[k]; 
     var style = window.getComputedStyle(cell); 
     cellsStyle["th-" + k] = AdjustStyleProperties(style); 
     if (includeHiddenElements || style.display !== 'none') { 
      columns[k] = cell ? cell.textContent.trim() : ''; 
     } 
    } 

    for (var i = 1; i < tableElem.rows.length; i++) { 
     var tableRow = tableElem.rows[i]; 
     var style = window.getComputedStyle(tableRow); 
     if (includeHiddenElements || style.display !== 'none') { 
      var rowData = []; 
      for (var j in Object.keys(columns)) { 
       var cell = tableRow.cells[j]; 
       style = window.getComputedStyle(cell); 
       if (includeHiddenElements || style.display !== 'none') { 
        var val = cell 
         ? cell.hasChildNodes() && cell.childNodes[0].tagName !== undefined 
         ? cell.childNodes[0].textContent + (cell.getAttribute("rowSpan") ? "*" + cell.getAttribute("rowSpan") : '') 
         : cell.textContent.trim() 
         : ''; 
        cellsStyle[(i-1) + "-" + j] = cell 
         ? cell.hasChildNodes() && cell.childNodes[0].tagName !== undefined 
         ? AdjustStyleProperties(window.getComputedStyle(cell.childNodes[0])) 
         : AdjustStyleProperties(window.getComputedStyle(cell)) 
         : {}; 
        rowData.push(val); 
       } 
      } 
      rows.push(rowData); 
     } 
    } 

    return {columns: Object.vals(columns), rows: rows, data: rows, styles: cellsStyle}; // data prop deprecated 
}; 

function AdjustStyleProperties(style) { 
    return { 
     cellPadding: parseInt(style.padding), 
     fontSize: parseInt(style.fontSize), 
     font: style.fontFamily, // helvetica, times, courier 
     lineColor: ConvertToRGB(style.borderColor), 
     lineWidth: parseInt(style.borderWidth)/10, 
     fontStyle: style.fontStyle, // normal, bold, italic, bolditalic 
     overflow: 'linebreak', // visible, hidden, ellipsize or linebreak 
     fillColor: ConvertToRGB(style.backgroundColor), 
     textColor: ConvertToRGB(style.color), 
     halign: 'center', // left, center, right 
     valign: 'middle', // top, middle, bottom 
     fillStyle: 'DF', // 'S', 'F' or 'DF' (stroke, fill or fill then stroke) 
     rowHeight: parseInt(style.height), 
     columnWidth: parseInt(style.width) // 'auto', 'wrap' or a number 
     //columnWidth: 'auto' 
    }; 
} 

function ConvertToRGB(value) { 
    if (value === undefined || value === '' || value === "transparent") 
     value = [255, 255, 255]; 
    else if (value.indexOf("rgb") > -1) 
     value = value.replace(/[^\d,]/g, '').split(',').map(function (x) { return parseInt(x) }); 
    else if (value.indexOf("#") > -1) 
     value = value.replace(/^#?([a-f\d])([a-f\d])([a-f\d])$/i 
         , function (m, r, g, b) { return '#' + r + r + g + g + b + b }) 
       .substring(1).match(/.{2}/g) 
       .map(function (x) { return parseInt(x, 16) }); 
    else if (Array.isArray(value)) 
     return value; 
    else { 
     var canvas, context; 
     canvas = document.createElement('canvas'); 
     canvas.height = 1; 
     canvas.width = 1; 
     context = canvas.getContext('2d'); 
     context.fillStyle = 'rgba(0, 0, 0, 0)'; 
     // We're reusing the canvas, so fill it with something predictable 
     context.clearRect(0, 0, 1, 1); 
     context.fillStyle = value; 
     context.fillRect(0, 0, 1, 1); 
     var imgData = context.getImageData(0, 0, 1, 1); 
     value = imgData.data.slice 
     ? imgData.data.slice(0, 3) 
     : [imgData.data[0], imgData.data[1], imgData.data[2]]; 
    } 
    return value;   
} 

Edit:

в соответствии с просьбой, это таблица HTML и й е JSON для tableCellStyles переменных

https://jsfiddle.net/6ewqnwty/

Из-за размером таблицы и количество символов для HTML и JSON, я поставил их в отдельной скрипке.

Edit 2:

Я просто сделал скрипку работоспособной, будучи в состоянии воспроизвести проблему.

https://jsfiddle.net/6ewqnwty/1/

Не идеально, как я его в моем приложении, я могу извлечь PDF с моделированием, только недостающие столбцы заголовков текста, но, по крайней мере, вопрос при загрузке PDF на ИЭ все еще присутствует

Answer 1

Запуск вашего примера Я получаю NaN для cellPadding. Вероятно, это также причина, по которой она не работает с последней версией. Вы можете сделать что-то простое, например, добавить:

cell.styles.cellPadding = styles.cellPadding || 5; 

в ApplyCellStyle. Причина, по которой вы получаете NaN, заключается в том, что IE автоматически возвращает пустую строку вместо «0px», которую делает хром и т. Д.

Также обратите внимание, что вам не нужно самостоятельно анализировать таблицу html, если вы обновляете, поскольку cell.raw установлен в элемент html в последней версии. Это означает, что вы можете разобрать стиль с чем-то вроде window.getComputedStyle(cell.raw).