cc-pdf-sass

This is the styling framework for PDF's and DocX. This enables RocketPDF to style a pdf/docx and Cloud Code to compile the style.

The sass files are included in the lib and enable use in CC.

Documentation

View the docs @ https://journeyapps-solutions.github.io/cc-pdf-sass/

Installation

Per machine

yarn add @journeyapps-solutions/cc-pdf-sass --save

Note, if you are having issues related to the package not being found after install. Double check that the yarn bin or npm bin is added to your path environmental variables

• run yarn global bin to get the yarn path to use.
• run npm bin to get the npm bin path.

Deploying

When a version is deployed, the documentation style is also updated.

yarn version

API

Both PDF and DocX use the same API to generate the required styles.

/**
 * Compiles the SASS to a string for use in CC handlebars
 * @param  {string|array} input Path to the directory/directories containing the variable.scss and custom.scss
 * @return {string} Compile CSS
 */
compileSass: async function (path) {...}

/**
 * Copy over the variable.scss and custom.scss files to the process path.
 * @param  {string} destination Destination folder path
 */
initSassFiles: async function (destination) {...}

Usage

index.js:

PDF Example:

// make sure config.js has the relevant credentials
const config = require('./config');
const PDFSass  = require('@journeyapps-solutions/cc-pdf-sass');

export async function run() {

  //The directory where variable.scss and custom.scss exists
  let _css = await PDFSass.PdfSassCompiler.compileSass(__dirname); 

  let data = {}
  data.generated_at = new Date();
  data.css =  _css;

  // Generate HTML using handlebars
  const pdfHtml = _pdfTemplate(data);

  //Do something with the pdfHtml

}

DocX Example

// make sure config.js has the relevant credentials
const config = require('./config');
const PDFSass  = require('@journeyapps-solutions/cc-pdf-sass');

export async function run() {

  //The directory where variable.scss and custom.scss exists
  let _css = await PDFSass.DocxSassCompiler.compileSass(__dirname); 

  let data = {}
  data.generated_at = new Date();
  data.css =  _css;

  // Generate HTML using handlebars
  const pdfHtml = _pdfTemplate(data);

  //Do something with the pdfHtml

}

// make sure config.js has the relevant credentials
const config = require('./config');
const PDFSass  = require('@journeyapps-solutions/cc-pdf-sass');

export async function run() {

  //The directories where variable.scss and custom.scss exists
  let _css = await PDFSass.PdfSassCompiler.compileSass([__dirname, `${process.cwd()}/../shared`]); 

  let data = {}
  data.generated_at = new Date();
  data.css =  _css;

  // Generate HTML using handlebars
  const pdfHtml = _pdfTemplate(data);

  //Do something with the pdfHtml

}

Printing Layout in OfflinePDF

Since we are using the native print function of the browser when printing offline, we need to add some css to correctly configure for this: Docs: https://developer.mozilla.org/en-US/docs/Web/CSS/@page

Portrait:

@page {
    size: 210mm 297mm;
    /* Chrome sets own margins, we change these printer settings */
    margin: 1mm 0mm 0mm 0mm;
    size: A4 portrait;
}

Landscape:

@page {
    size: 210mm 297mm;
    /* Chrome sets own margins, we change these printer settings */
    margin: 1mm 0mm 0mm 0mm;
    size: A4 landscape;
}

Development

Commands:

• yarn docs - Compile the documentation Sass
• yarn serve - Serve the documentation via browser_sync
• yarn test - Run the Testing Suite

Changelog

2020/02/02

• Added support for docx document generation
• Version break due to new syntax use, not backwards compatible

2018/09/03

• container now sets paddings based on the page tag
• Added formating variables for <p> (paragraph) tag
• Added Colors variables to the headings