Skip to content

Instantly share code, notes, and snippets.

View apexdodge's full-sized avatar

Zack Schwartz apexdodge

10 followers · 4 following
View GitHub Profile
@apexdodge
apexdodge / gist:659fe63a3c8ccbbeec56cbbbd24d328f
Created December 19, 2018 20:01
HTML to PDF with ReactJS
import React, { Component } from 'react';
class HtmlToPdf extends Component {
convertHtmlToPdf(e) {
fetch('https://v2018.api2pdf.com/chrome/html', {
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Authorization': 'YOUR-API-KEY' //Get your API key from https://portal.api2pdf.com
@apexdodge
apexdodge / gist:556badd8b4fbf71d3cc566800b52b012
Created November 19, 2018 22:49
jquery full version
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
crossorigin="anonymous"></script>
<style>
body {
background: #20262E;
padding: 20px;
@apexdodge
apexdodge / gist:96419862e9bcf6b8729b496b31d66eb2
Created November 13, 2018 01:45
<html style="color:green;" lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Spicy+Rice" rel="stylesheet">
</head>
<body>
<p style="font-family:Spicy Rice, cursive;">Example of a custom font from fonts.google.com</p>
</body>
</html>
@apexdodge
apexdodge / gist:f2c0acc1f3c10159e6c1114685b5eb42
Last active November 24, 2020 12:54
HTML - Testing Different System Fonts
<html lang="en">
<body>
<p>Hello World, no font family, defaults to Times New Roman</p>
<p style="font-family:Times New Roman;">Hello World, Times New Roman</p>
<p style="font-family:Arial;">Hello World, Arial</p>
<p style="font-family:Courier;">Hello World, Courier</p>
<p style="font-family:Verdana;">Hello World, Verdana</p>
<p style="font-family:Tahoma;">Hello World, Tahoma</p>
<p style="font-family:Arial Black;">Hello World, Arial Black</p>
<p style="font-family:Comic Sans MS;">Hello World, Comic Sans MS</p>
@apexdodge
apexdodge / gist:61ababd37e649c8cfd8f8437c0ff1d87
Created October 7, 2018 21:54
Bootstrap 4 HTML Template for Displaying Form Data / Applicant Data
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style>
@page {
@bottom-right {
content: counter(page) " of " counter(pages);
}
@apexdodge
apexdodge / gist:e188ce23032d9c12f78eeafb2841b1ff
Created August 21, 2018 23:50
footer with page numbers for wkhtmltopdf on api2pdf
{
"html": "<p>Hello World</p>",
"inlinePdf": true,
"fileName": "test.pdf",
"options": {
"footerRight": "Page [page] of [topage]"
}
}
@apexdodge
apexdodge / gist:b94f217286a619916ddc193fab8d12f3
Created August 21, 2018 21:02
sample api2pdf payload for headless chrome header and footer with page numbers
{
"html": "<p>Hello World</p>",
"inlinePdf": true,
"fileName": "test.pdf",
"options": {
"displayHeaderFooter": true,
"footerTemplate": "<div class=\"page-footer\" style=\"width:100%; text-align:right; font-size:12px;\">Page <span class=\"pageNumber\"></span> of <span class=\"totalPages\"></span></div>"
}
}
@apexdodge
apexdodge / gist:8bd58e37f6b78ea711401860e7b64479
Created August 21, 2018 21:00
footerTemplate example for headless chrome
<div class=\"page-footer\" style=\"width:100%; text-align:right; font-size:12px;\">Page <span class=\"pageNumber\"></span> of <span class=\"totalPages\"></span></div>
@apexdodge
apexdodge / gist:58d543918aa4b050d87e9b6b375a994c
Created August 21, 2018 20:00
HTML to force page breaks when printing to PDF
<div style="page-break-before:always;">
<p>YOUR CONTENT 1</p>
</div>
<div style="page-break-before:always;">
<p>YOUR CONTENT 2</p>
</div>
<div style="page-break-before:always;">
<p>YOUR CONTENT 3</p>
@apexdodge
apexdodge / gist:5e67764b4722e280c01ff53701535ded
Created July 26, 2018 02:58
Bootstrap 4 Packing Slip HTML Template
<html lang="en">
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<main role="main" class="container">
<div class="row">
<div class="col-8">