Отпечатването или конвертирането на определено съдържание, т.е. текста на публикация в блог в PDF, е само един плъгин в WordPress. Форумите за поддръжка в Google обаче смятат, че това е почти невъзможно да се постигне, тъй като повечето потребители на Blogspot се задоволяват с използването на услуга на трета страна, Print Friendly и PDF, за да конвертират своите писания в PDF файлове, които техните читатели да изтеглят.

Въпреки това има и начин да използвате мощността на вашето устройство за четене на вашия блог, за да конвертирате вашите писания в PDF файлове, като използвате функцията за печат, както и като използвате малко от магията на JavaScript, за да отпечатате само конкретен елемент в предпочитания от вас ‹div›, например публикацията ви в блога.

Кодиране на машината за печат

За да може нашето PDF преобразуване на устройството да работи, дори и в нашия блог Blogger, ще трябва да настроим две функции на JavaScript като двигател зад нашата разпечатка. Ще използваме следните функции:

1. delimg() — За премахване на изображения в разпечатката (По избор)
2. printDiv() — За отпечатване на конкретен div

Не е нужно да кодирате всичко сами, тъй като талантливите хора от Stack Overflow вече са направили кодирането вместо вас. Просто копирайте и поставете този код в празен HTML/JavaScript Gadget в главата на шаблона, който използвате, например Facebook SDK gadget в темите от Templatify.

‹script›
функция delimg() {

$(“#PrintPost”).find(“img”).remove();


функция printDiv() {
var divContents = document.getElementById(“PrintPost”).innerHTML;
var a = window.open('', '', 'height=800, ширина=1200');

a.document.write('‹body › ‹h2›Асимилаторите от Асад Имран ‹br›');
a.document.write('‹html›');
a.document.write (divContents);
a.document.write('‹/body›‹/html›');
a.document.close();
a.print();

‹/script›

Кредити: GeeksforGeeks

Моля, избягвайте да записвате директно в елемента ‹head› във вашия шаблон, тъй като това няма да работи и вашият шаблон няма да бъде запазен.

Намиране на необходимия ‹div› за печат

За да намерите класа или идентификатора на div, който искате да отпечатате, ще трябва да използвате функцията Inspect Element в Google Chrome. Ето как:

  1. Отворете публикация в блог на вашия уебсайт в настолната версия на Google Chrome.
    2. Щракнете с десния бутон близо до заглавието на вашата публикация в блога и изберете Инспектиране на елементи.
    3. Ако цялата област на публикацията ви в блога е маркирана, запишете името на класа на div, съдържащ публикацията ви в блога.

Обикновено публикациите в блогове на платформата Blogger се показват под класа div „item-post-inner“. Въпреки това div с клас не работи добре с JavaScript. Ще трябва да обвием този div с друг div с ID „PrintPost“.

  1. Отидете на вашето табло за управление на Blogger › Тема › Редактиране на HTML.
    2. Щракнете вътре в кода и след това натиснете CTRL + F от клавиатурата.
    3. Въведете item-post-inner (или div, който сте открили) в полето за търсене и натиснете Enter.
    4. Щракнете върху бутона › до номера на реда на „‹div class=’item-post-inner’›“, за да свиете този div.
    5. Въведете „‹div id=’PrintPost’›“ над „‹div class=’item-post-inner’›“ и го затворете с елемента ‹/div›.

Създаване на бутона за печат или конвертиране в PDF

Ако вашият шаблон има опцията да показва HTML реклами под публикацията ви в блога (в менюто Оформления), можете лесно да поставите задействащия код по-долу, като използвате притурката HTML/JavaScript. Но преди това ще трябва да стилизираме нашия бутон чрез CSS.

  1. Отидете на тази връзка, за да създадете любимия си стил за бутона: https://www.bestcssbuttongenerator.com/
    2. Щракнете върху визуализацията на вашия бутон и копирайте САМО неговия CSS код.
    3. Или използвайте моя, като инжектирате този CSS код чрез Layouts › Theme Designer › Advanced › Custom CSS

.myButton {
box-shadow: -2px -1px 21px -1px #3dc21b;
background-color:#44c767;
border-radius:42px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:16px;
padding:12px 20px;
text-decoration:none;
}
.myButton:hover {
background-color:#5cbf2a;
}< br /> .myButton:active {
position:relative;
top:1px;
}

Сега добавете този задействащ код в притурката HTML/JavaScript като реклама под публикацията в блога ви (ако шаблонът ви позволява)

‹input type=”button” class=”myButton” value=”🔻 Запиши като PDF” onclick=”delimg(); printDiv();” /›

Използваме onclick, за да извикаме две функции заедно. Ако обаче не искате да премахвате изображения от разпечатките или PDF файловете, премахнете „delimg();“ извикване и функция съответно от onclick и ‹script›.

Ако вашият шаблон не ви позволява да поставите задействащия код като реклама под публикацията си, ето как можете да го добавите под публикациите си:

  1. Отидете на Тема › Редактиране на HTML
    2. Натиснете CTRL + F и потърсете следното „‹div class='post-footer'›
    3. Поставете задействащия код под „‹div class='post -долен колонтитул'›”.
    4. Готово

Сега отворете отново някоя от публикациите си в блога и ще видите бутон под нея, който казва „Запазване като PDF“. Щракването върху него ще отвори диалогов прозорец за печат със съдържанието само на вашата публикация в него. Запазете го като PDF или го изпратете направо на принтера!

Отстраняване на неизправности

Ако нищо не се случи на бутона след щракване, проверете дали:

  1. кодът в ‹script› извиква същия идентификатор на div, който възнамерявате да отпечатате.
    2. Кодът в ‹script› е правилно форматиран.
    3. Конкретният div е обвит под „‹div id=’PrintPost’›“ е затворен правилно.
    4. Задействащият код извиква delimg(); функция преди функцията printDiv().

Източници и препоръчителна литература

1. https://stackoverflow.com/questions/2255291/print-the-contents-of-a-div
2. https://www.geeksforgeeks.org/print-the-contents- of-a-div-element-using-javascript/
3. https://stackoverflow.com/questions/9105925/remove-image-without-id-from-div-with-id