Экспорт массива в виде таблицы с использованием jspdf

У меня есть данные в формате ниже.

[
    {"Company":"XYZ1", "FName":"John", "LName": "Deere", "ID": 1234}, 
    {"Company":"XYZ2", "FName":"Jack", "LName": "Jones", "ID": 2345},
    {"Company":"XYZ3", "FName":"James", "LName": "Lebron", "ID": 3456}
]

Есть ли способ экспортировать одни и те же данные в виде двух разных таблиц в файл PDF? Я использую пакет Angular 4 и jsPDF.

Таблица 1

**Company**    **FName**
  XYZ1            John
  XYZ2            Jack
  XYZ3            James

Таблица 2

**LName**    **ID**
  Deere        1234
  Jones        2345
  Lebron       3456
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
2
0
7 941
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Позвольте мне попытаться обобщить вопрос и упростить ответ на примере. Я создам образец таблицы

The HTML file looks like....
    <div id = "render_me">
    <div id = "table">
    <table id = "StudentInfoListTable">
                    <thead>
                        <tr>    
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody>
                            <tr>
                                <td>Dani</td>
                            </tr>               
                    </tbody>
                </table>
      </div>
      <a href = "#">Download Test PDF</a>

Файл JS выглядит так ...

var doc = new jsPDF();

// We'll make our own renderer to skip this editor
var specialElementHandlers = {
    '#editor': function(element, renderer){
        return true;
    }
};

doc.fromHTML($('#render_me').get(0), 15, 15, {
    'width': 170, 
    'elementHandlers': specialElementHandlers
});
//doc.save('Test.pdf');

$('a').click(function(){
  doc.save('TestHTMLDoc.pdf');
});
Ответ принят как подходящий

Вы можете использовать jspdf и jspdf-autotable для загрузки в формате pdf. Вот пример того же. Вы можете изменить в соответствии с вашими потребностями. Надеюсь, это поможет вам

В HTML:

<a (click) = "convert()">Generate PDF</a>

В файле TS:

import * as jsPDF from 'jspdf';
import 'jspdf-autotable';

И используйте следующую функцию:

convert() {

       var doc = new jsPDF();
       var col = ["Sr. No.","Details"];
       var col1 = ["Details", "Values"];
       var rows = [];
       var rows1 = [];

  /* The following array of object as response from the API req  */



var itemNew = [

  { index:'1',id: 'Case Number', name : '101111111' },
  { index:'2',id: 'Patient Name', name : 'UAT DR' },
  { index:'3',id: 'Hospital Name', name: 'Dr Abcd' }

]


   itemNew.forEach(element => {      
        var temp = [element.index,element.id];
        var temp1 = [element.id,element.name];
        rows.push(temp);
        rows1.push(temp1);

    });        

        doc.autoTable(col, rows, { startY: 10 });

        doc.autoTable(col1, rows1, { startY: 60 });
        doc.save('Test.pdf');
      }

И это будет выглядеть так:

Это именно то, что я ищу. Ты спас мне день @ Rak2018

killer 05.05.2018 00:01

@ Rak2018, я был бы очень признателен, если бы вы могли открыть для этого демонстрацию stackblitz. Я столкнулся с проблемой. для меня заголовки столбцов не отображаются и не могут отображать несколько свойств

Mr. Learner 13.06.2019 10:11

Другие вопросы по теме