Загрузите div на HTML-странице в формате pdf с помощью javascript

У меня есть контент div с идентификатором "content". В блоке контента у меня есть несколько графиков и таблиц. Я хочу загрузить этот div в формате pdf, когда пользователь нажимает кнопку загрузки. Есть ли способ сделать это с помощью JavaScript или jQuery?

525   5  

5 ответов:

Вы можете сделать это с помощью jsPDF

HTML:

<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>A paragraph</p>
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>

JavaScript:

var doc = new jsPDF();
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};

$('#cmd').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});
84  
2018-09-18 11:06:42

в jQuery нет такого механизма, но вы можете использовать плагины, такие как http://www.webresourcesdepot.com/create-pdf-files-with-javascript-jspdf/

также проверьте этот пост можно ли создать PDF с помощью jQuery?

1  
2017-05-23 15:34:47

AFAIK нет собственной функции jquery, которая делает это. Лучшим вариантом будет обработка конверсии на сервере. Как вы это делаете, зависит от того, какой язык вы используете (.net, php и т. д.). Вы можете передать содержимое div в функцию, которая обрабатывает преобразование, которое вернет pdf пользователю.

1  
2013-06-25 12:20:29

ваше решение требует некоторого метода ajax для передачи html на внутренний сервер, который имеет объект html в pdf, а затем возвращает вывод pdf, созданный обратно в браузер.

первая настройка кода на стороне клиента, мы установим код jquery как 

   var options = {
            "url": "/pdf/generate",
            "data": "data=" + $("#content").html(),
            "type": "post",
        }
   $.ajax(options)

затем перехватить данные из сценария генерации html2pdf следующим образом

   $html = $_POST['data'];
   $pdf = html2pdf($html);

   header("Content-Type: application/pdf"); //check this is the proper header for pdf
   header("Content-Disposition: attachment; filename='some.pdf';");
   echo $pdf;

1  
2015-12-30 15:20:02

да, можно захватить div как PDF-файлы в JS. Вы можете проверить решение, предоставленное https://grabz.it. у них есть хороший и чистый JavaScript API, который позволит вам захватить содержимое одного элемента HTML, такого как div или span.

Итак, йо использовать его вам понадобится и приложения+ключ и бесплатно SDK. Использование его заключается в следующем:

допустим, у вас есть HTML:

<div id="features">
    <h4>Acme Camera</h4>
    <label>Price</label>9<br />
    <label>Rating</label>4.5 out of 5
</div>
<p>Cras ut velit sed purus porttitor aliquam. Nulla tristique magna ac libero tempor, ac vestibulum felisvulput ate. Nam ut velit eget
risus porttitor tristique at ac diam. Sed nisi risus, rutrum a metus suscipit, euismod tristique nulla. Etiam venenatis rutrum risus at
blandit. In hac habitasse platea dictumst. Suspendisse potenti. Phasellus eget vehicula felis.</p>

для захвата что находится под идентификатором функции вам нужно будет:

//add the sdk
<script type="text/javascript" src="grabzit.min.js"></script>
<script type="text/javascript">
//login with your key and secret. 
GrabzIt("KEY", "SECRET").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "format": "pdf"}).Create();
</script>

нужно заменить на http://www.example.com/my-page.html С вашим целевым url и #feature за ваш селектор CSS.

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

другие конфигурация и изготовление на заказ вы можете сделать к механизму div-скриншота, пожалуйста проверьте их здесь

0  
2017-07-01 21:53:39

Comments

    Ничего не найдено.
Click here to cancel reply.