Czy można zapisać stronę HTML jako PDF za pomocą JavaScript lub jQuery?

Czy można zapisać stronę HTML jako PDF za pomocą JavaScript lub jQuery?

Szczegółowo:

Wygenerowałem jedną stronę HTML zawierającą tabelę. Posiada jeden przycisk „zapisz jako PDF”. Jeśli użytkownik kliknie ten przycisk, ta strona HTML musi zostać przekonwertowana na plik PDF.

Czy jest to możliwe przy użyciu JavaScript lub jQuery?

Tak , użyj jspdf, aby utworzyć plik pdf.

Następnie możesz przekształcić go w identyfikator URI danych i wstawić łącze pobierania do DOM

Będziesz jednak musiał samodzielnie napisać konwersję HTML do PDF.

Po prostu użyj wersji strony do druku i pozwól użytkownikowi wybrać, w jaki sposób chce wydrukować stronę.

Edycja: Najwyraźniej ma minimalne wsparcie

Zatem odpowiedzią jest napisanie własnego programu do zapisywania plików PDF lub skorzystanie z istniejącego programu do zapisywania plików PDF, który zrobi to za Ciebie (na serwerze).

Tak, bardzo łatwo to zrobić z javascriptem. Mam nadzieję, że ten kod jest dla Ciebie przydatny.

Będziesz potrzebować biblioteki JSpdf .

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

    <p>a pararaph</p>
</div>
<div id="editor"></div>
<button id="cmd">Generate PDF</button>

<script>
    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');
    });

    // This code is collected but useful, click below to jsfiddle link.
</script>

jsfiddle link tutaj

To może być późna odpowiedź, ale tak jest najlepiej: https://github.com/eKoopmans/html2pdf

Czysta implementacja javascript. Pozwala określić tylko jeden element za pomocą identyfikatora i przekonwertować go.

Możesz użyć Phantomjs. Pobierz tutaj i użyj następującego przykładu, aby przetestować funkcję konwersji html-> pdf https://github.com/ariya/phantomjs/blob/master/examples/rasterize.js

Przykładowy kod:

phantomjs.exe examples/rasterize.js http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/xhtml/index.html sample.pdf

Użyłem jsPDFi dom-to-imagebiblioteki do eksportu HTML do PDF.

Piszę tutaj jako odniesienie do kogo dotyczy.

$('#downloadPDF').click(function () {
    domtoimage.toPng(document.getElementById('content2'))
      .then(function (blob) {
          var pdf = new jsPDF('l', 'pt', [$('#content2').width(), $('#content2').height()]);
          pdf.addImage(blob, 'PNG', 0, 0, $('#content2').width(), $('#content2').height());
          pdf.save("test.pdf");
      });
});

Demo: https://jsfiddle.net/viethien/md03wb21/27/

Oto jak bym to zrobił, to pomysł, a nie kuloodporna konstrukcja, trzeba to zmodyfikować

• Użytkownik klika przycisk Zapisz jako PDF
• Do serwera wysyłane jest wywołanie za pomocą ajax
• Serwer odpowiada za pomocą adresu URL do pliku PDF wygenerowanego przy użyciu HTML, bardzo pomyślnie użyłem Apache FOP
• Js obsługujący odpowiedź ajax wykonuje polecenie location.href, aby wskazać adres URL wysłany przez JS, a gdy tylko ten adres URL zostanie załadowany, wysyła plik, używając nagłówka dyspozycji zawartości jako załącznika, zmuszając użytkownika do pobrania pliku.

Konwersja html do pdf po stronie serwera jest znacznie łatwiejsza i bardziej niezawodna. Używamy Google Puppeteer. Jest dobrze utrzymany z opakowaniami dla dowolnego wybranego języka serwera. Puppeteer używa bezgłowego Chrome do generowania zrzutów ekranu i / lub plików PDF. Zaoszczędzi ci to DUŻO bólu głowy, zwłaszcza jeśli musisz wygenerować złożone pliki PDF z tabelami, obrazami, wykresami, wieloma stronami itp.

https://developers.google.com/web/tools/puppeteer/

Jest jeszcze jeden bardzo oczywisty sposób konwersji HTML na PDf przy użyciu JavaScript: użyj do tego internetowego interfejsu API. To zadziała dobrze, jeśli nie musisz wykonywać konwersji, gdy użytkownik jest offline.

PdfMage to jedna z opcji, która ma fajne API i oferuje darmowe konta. Jestem pewien, że możesz znaleźć wiele alternatyw (na przykład tutaj )

W przypadku API PdfMage miałbyś coś takiego:

 $.ajax({
    url: "https://pdfmage.org/pdf-api/v1/process",
    type: "POST",
    crossDomain: true,
    data: { Html:"<html><body>Hi there!</body></html>" },
    dataType: "json",
    headers: {
        "X-Api-Key": "your-key-here" // not very secure, but a valid option for non-public domains/intranet
    },
    success: function (response) {
        window.location = response.Data.DownloadUrl;
    },
    error: function (xhr, status) {
        alert("error");
    }
});

Tak. Na przykład możesz skorzystać z rozwiązania https://grabz.it .

Posiada interfejs API JavaScript, którego można używać na różne sposoby, aby pobrać zrzut ekranu i manipulować nim. Aby użyć go w swojej aplikacji, musisz najpierw uzyskać klucz i tajny klucz aplikacji, a następnie pobrać bezpłatny pakiet SDK JavaScript.

Zobaczmy więc prosty przykład jego użycia:

//first include the grabzit.min.js library in the web page
<script src="grabzit.min.js"></script>
//include the code below to add the screenshot to the body tag    
<script>
//use secret key to sign in. replace the url.
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.google.com").Create();
</script>

Następnie po prostu poczekaj chwilę, a obraz automatycznie pojawi się na dole strony, bez konieczności ponownego ładowania strony.

To jest najprostsze. Więcej przykładów manipulacji obrazami, dołączania zrzutów ekranu do elementów itp. Można znaleźć w dokumentacji .

Krótko mówiąc: nie. Pierwszym problemem jest dostęp do systemu plików, który w większości przeglądarek jest domyślnie ustawiony na no ze względów bezpieczeństwa. Nowoczesne przeglądarki czasami obsługują minimalistyczne przechowywanie w postaci bazy danych lub można poprosić użytkownika o włączenie dostępu do plików.

Jeśli masz dostęp do systemu plików, zapisywanie jako HTML nie jest takie trudne (zobacz obiekt pliku w dokumentacji JS) - ale PDF nie jest taki łatwy. PDF to dość zaawansowany format plików, który naprawdę nie nadaje się do Javascript. Wymaga pisania informacji w typach danych, które nie są bezpośrednio obsługiwane przez Javascript, takich jak słowa i quady. Musisz także wstępnie zdefiniować system wyszukiwania w słowniku, który należy zapisać w pliku. Jestem pewien, że ktoś mógłby sprawić, że to zadziała, ale zaangażowany wysiłek i czas lepiej poświęcić na naukę C ++ lub Delphi.

Jednak eksport HTML powinien być możliwy, jeśli użytkownik zapewnia nieograniczony dostęp