We Keep Coding

Integrating Html2Pdf with CouchCMS and AJAX

I am using the following:
Html2Pdf GitHub
CouchCMS Official Site
Firefox Developers Edition
I am working on generating a PDF file. When I use the code given in the documentation I am able to generate the PDF. Also, when I try to include the CouchCMS code the PDF is generated (as in a PDF which opens in a browser PDF Viewer).
My CouchCMS Code is:
<?php
require_once '../couch/cms.php';
require __DIR__.'/vendor/autoload.php';
?>
<cms:php>
use Spipu\Html2Pdf\Html2Pdf;
$html = '<cms:pages masterpage="pdf-generation/index.php"><h1>HelloWorld</h1>This is my first test</cms:pages>';
$html2pdf = new Html2Pdf();
$html2pdf->writeHTML($html);
$html2pdf->output();
</cms:php>
<?php COUCH::invoke(); ?>
Now I am trying to achieve the following:
From a list view of students, a button is clicked
This button click sends the button id to an AJAX script
AJAX Script needs to generate the following:
a. Open a Download dialog box with a custom pdf file name and allow to save locally.
b. Open a new window to display the generated pdf with the student info.
My codes for the above are:
List view of Student:
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Date of Birth</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<cms:pages masterpage=k_template_name>
<cms:no_results>
<tr>
<td class="text-center" colspan="5">
- No record(s) found -
</td>
</tr>
</cms:no_results>
<tr>
<td>
<cms:show k_absolute_count /> (<cms:show k_page_id />)
</td>
<td>
<cms:show fname />
</td>
<td>
<cms:show lname />
</td>
<td>
<cms:if dob>
<cms:date dob format='d-m-Y' />
<cms:else />
1970-01-01
</cms:if>
</td>
<td class="text-center">
<form>
<button class="btn btn-danger btn-sm text-uppercase" type="submit" data-id="<cms:show k_page_id />">
<i class="fa fa-file-pdf-o"></i> Generate PDF
</button>
</form>
</td>
</tr>
</cms:pages>
</tbody>
</table>
AJAX Script to Call AJAX file:
<script type="text/javascript">
$("button").click(function(e) {
e.preventDefault();
var i = $(e.currentTarget).attr('data-id');
$.ajax({
type: "POST",
url: "<cms:show k_site_link />pdf-generation/html2pdf.php",
data: {
id: i
},
success: function(response) {
$("body").html(response);
// window.location.href = '<cms:show k_site_link />pdf-generation/pdf-test.php?id=';
}
});
});
</script>
AJAX File Code:
<?php
require_once '../couch/cms.php';
require __DIR__.'/vendor/autoload.php';
?>
<cms:set page_id="<cms:gpc 'id' method='POST' />" "global" />
<cms:content_type "application/pdf" />
<cms:php>
use Spipu\Html2Pdf\Html2Pdf;
$html = '<cms:pages masterpage="pdf-generation/index.php" id=page_id limit="1">
<div style="width: 210mm; height: 148.5mm;">
<!-- Page Border -->
<div style="width: 205mm; height: 143.5mm; border: 2px solid rgba(0,0,0,0.5);">
<!-- Content Margin from Page Border : 3mm all sides -->
<div style="margin: 3mm;">
<!-- Schools Details : Header -->
<div style="width: 191mm; height: 25mm; text-align: center;">
<h3 style="margin-bottom: 0; margin-top: 0;">School Name</h3>
<small>
<p style="margin: 0;">Address Line #1</p>
<p style="margin: 0;">Address Line #2</p>
<p style="margin: 0;">Phone Number</p>
</small>
</div>
<!-- Schools Details : Header -->
<!-- Certificate Title -->
<div style="width: 191mm; height: 5mm; line-height: 5mm; text-align: center;">
<strong style="text-transform: uppercase;">BONAFIDE CERTIFICATE</strong>
</div>
<!-- Certificate Title -->
<!-- Certificate & GR Number -->
<div style="width: 191mm; height: 5mm; line-height: 5mm;">
<div style="width: 95.5mm; float: left; text-align: center;">
<strong>Certificate No. # </strong>2022001
</div>
<div style="width: 95.5mm; margin-left: 95.5mm; text-align: center;">
<strong>Student GR No. # </strong>12345
</div>
</div>
<!-- Certificate & GR Number -->
<!-- Spacing -->
<div style="width: 191mm; height: 5mm;"></div>
<!-- Spacing -->
<!-- Certificate Content -->
<div style="width: 191mm; font-size: 16px; line-height: 25px;">
This is to certify that <em><u><cms:show fname /> <cms:show lname /></u></em> son/daughter of <em>_______</em>, is/ was a bonafide student of our school during the academic session <em>_____</em> to <em>_____</em>. His/ Her Date of birth according to the school records is <em><u><cms:date dob format="d M Y" /></u></em> He/ She bears a Good Moral Character.
</div>
<!-- Certificate Content -->
<!-- Spacing -->
<div style="width: 191mm; height: 5mm;"></div>
<!-- Spacing -->
<!-- Certificate Issue Date -->
<div style="width: 191mm; height: 5mm; line-height: 5mm;">
<strong>Date of Issue: </strong>Jan 01, 2022
</div>
<!-- Certificate Issue Date -->
<div style="width: 191mm; height: 28mm;">
<div style="width: 95.5mm; float: left; text-align: center; margin-top: 18mm;">
<strong>Headmistress</strong>
<div style="padding-top: 1px;"></div>
(Stamp and Sign)
</div>
<div style="width: 95.5mm; margin-left: 95.5mm; text-align: center; margin-top: 18mm;">
<strong>School Seal</strong>
<div style="padding-top: 1px;"></div>
(Stamp)
</div>
</div>
</div>
<!-- Content Margin from Page Border : 3mm all sides -->
</div>
<!-- Page Border -->
</div></cms:pages>';
$html2pdf = new Html2Pdf();
$html2pdf->writeHTML($html);
$html2pdf->output();
</cms:php>
<?php COUCH::invoke(); ?>
When I click the Generate PDF Button, I get the following Output, but no pdf is shown in PDF Viewer:
%PDF-1.7 %���� 7 0 obj << /Type /Page /Parent 1 0 R /LastModified (D:20220328130254+00'00') /Resources 2 0 R /MediaBox [0.000000 0.000000 595.276000 841.890000] /CropBox [0.000000 0.000000 595.276000 841.890000] /BleedBox [0.000000 0.000000 595.276000 841.890000] /TrimBox [0.000000 0.000000 595.276000 841.890000] /ArtBox [0.000000 0.000000 595.276000 841.890000] /Contents 8 0 R /Rotate 0 /Group << /Type /Group /S /Transparency /CS /DeviceRGB >> /Annots [ 6 0 R ] /PZ 1 >> endobj 8 0 obj <> stream x��Z[S�H~�_q��ũҶ�}��{��#�����O�V�[��/��˞WFXU5��x�G�C p��fD1 �9�ALkN�+bM%"�1-� I��2A,��R��=/����I��vU � U�J��Ōr��)�\�_kڪ�T�/�Vj0/��^��Q8'�0^1nA����$��Y��9���U���?-q�%��ƭNRE�YgOU)x3^T}u>z�Y�ʊ����f���2H��ȯ�04fHI����׽�t4̡a� ��i��\�d`�#4۽4����0Η�`J#�D�E� �C A\s��Q�"������>\�a�����=;���9�Ǖ톛��F��^O�Ohn�]GDh��� ��l͇�u�>y2��O�\���Y/w8ǘ��/T �'�^F��V��U^���g�l� �9յ�8��S�)ęL��������14�oZ�'�O��R�Y�� ��PͰE"�W|]܈]�t���c�J��b�_;t�S�̠���yS�ڕ%d�'g.�4���Of�䡙���W�ӛ�\A.$bj���r >��f�om�tZ=�3h�qHM�S^r��%��<�v돐�l�H:{ΐ�56��;Rgbh]m����O�g���k��)_#X��`$'���y=/���k�F�Ԯ8d��0��n/�����z�� Ė,���U����e-�}Z�0�X�K���D1d���v ���p� A���f��b����� ۶Q��u��˛�s�_�!��C<�A=,{�vX��i: endstream endobj 1 0 obj << /Type /Pages /Kids [ 7 0 R ] /Count 1 >> endobj 3 0 obj <> endobj 4 0 obj <> endobj 5 0 obj <> endobj 2 0 obj << /ProcSet [/PDF /Text /ImageB /ImageC /ImageI] /Font << /F1 3 0 R /F2 4 0 R /F3 5 0 R >> /XObject << >> >> endobj 6 0 obj <> /H /I>> endobj 9 0 obj << /Creator (��Html2Pdf - TCPDF) /Producer (��TCPDF 6.4.4 \(http://www.tcpdf.org\)) /CreationDate (D:20220328130254+00'00') /ModDate (D:20220328130254+00'00') /Trapped /False >> endobj 10 0 obj << /Type /Metadata /Subtype /XML /Length 4656 >> stream application/pdf 2022-03-28T13:02:54+00:00 Html2Pdf - TCPDF 2022-03-28T13:02:54+00:00 2022-03-28T13:02:54+00:00 TCPDF 6.4.4 (http://www.tcpdf.org) uuid:3fbc284a-635c-7e1d-254c-6d5fc16a3de2 uuid:3fbc284a-635c-7e1d-254c-6d5fc16a3de2 http://ns.adobe.com/pdf/1.3/ pdf Adobe PDF Schema internal Adobe PDF Schema InstanceID URI http://ns.adobe.com/xap/1.0/mm/ xmpMM XMP Media Management Schema internal UUID based identifier for specific incarnation of a document InstanceID URI http://www.aiim.org/pdfa/ns/id/ pdfaid PDF/A ID Schema internal Part of PDF/A standard part Integer internal Amendment of PDF/A standard amd Text internal Conformance level of PDF/A standard conformance Text endstream endobj 11 0 obj << /Type /Catalog /Version /1.7 /Pages 1 0 R /Names << >> /ViewerPreferences << /Direction /L2R >> /PageLayout /SinglePage /PageMode /UseNone /OpenAction [7 0 R /FitH null] /Metadata 10 0 R >> endobj xref 0 12 0000000000 65535 f 0000001753 00000 n 0000002143 00000 n 0000001812 00000 n 0000001918 00000 n 0000002029 00000 n 0000002267 00000 n 0000000015 00000 n 0000000483 00000 n 0000002483 00000 n 0000002726 00000 n 0000007465 00000 n trailer << /Size 12 /Root 11 0 R /Info 9 0 R /ID [ <3fbc284a635c7e1d254c6d5fc16a3de2> <3fbc284a635c7e1d254c6d5fc16a3de2> ] >> startxref 7674 %%EOF
When I check my XHR Call, In the Response Payload I get a string, this string when appended to:
data:application/pdf;base64,XXXXXXXXXXX
generates the PDF and opens it in PDF Viewer.
I request for help with the following:
Open the PDF Viewer in a new tab to view the PDF (current output opens in the same tab and on the url where the list view is displayed but not in pdf viewer, but not in a new tab with probably the AJAX url)
Open a Download Dialog box to save the PDF with a custom, pre-supplied file name.
Any help will be really appreciated.
Regards,
Aashish

Why is the table cutoff in Chrome but not Internet Explorer?

I'm currently following a tutorial in order to learn how to create a dashboard to track cryptocurrency prices. However, I have become stuck on an issue where the top of my tables gets cut off when I run the webpage on chrome , while the top of the webpage is supposed to look like this at the top of the webpage as can be seen when ran on IE . When I disable javascript within Chrome I get something like . The program's backend uses next.js, coingecko API to fetch prices and bootstrap for formatting. I would greatly appreciate any tips that could help in pushing me towards the solution. I have attached the relevant code and resources below.
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import CoinGecko from 'coingecko-api';
const coinGeckoClient = new CoinGecko();
export default function Home(props) {
const { data } = props.result;
const formatPercent = number =>
`${new Number(number).toFixed(2)}%`
const formatDollar = (number, maximumSignificantDigits) =>
new Intl.NumberFormat(
'en-US',
{
style: 'currency',
currency: 'USD',
maximumSignificantDigits
})
.format(number);
return (
<div className={styles.container}>
<Head>
<title>Coinmarketcap clone</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<h1>Coinmarketcap clone</h1>
<table className="table">
<thead>
<tr>
<th>Symbol</th>
<th>24H Change</th>
<th>Price</th>
<th>Market cap</th>
</tr>
</thead>
<tbody>
{data.map(coin => (
<tr key={coin.id}>
<td>
<img
src={coin.image}
style={{width: 25, height: 25, marginRight: 10}}
/>
{coin.symbol.toUpperCase()}
</td>
<td>
<span
className={coin.price_change_percentage_24h > 0 ? (
'text-success'
) : 'text-danger'}
>
{formatPercent(coin.price_change_percentage_24h)}
</span>
</td>
<td>{formatDollar(coin.current_price, 20)}</td>
<td>{formatDollar(coin.market_cap, 12)}</td>
</tr>
))}
</tbody>
</table>
</div>
)
}
Tutorial: https://www.youtube.com/watch?v=klFeYge2G0I
Repo: https://github.com/jklepatch/eattheblocks/tree/master/screencast/226-coinmarketcap-clone

VueJs not rendering when add <div> tag in <template>

My VueJs Init
I use webpack and initialize the vuejs:
import Vue from "vue";
import CarrierList from '../components/carrier/CarrierList';
/**
* Create a fresh Vue Application instance
*/
new Vue({
el: '#app',
components: {CarrierList},
}).$mount('#app');
My Component:
<template>
<table class="table table-striped">
<thead>
<tr>
<th>ID </th>
<th>Name</th>
<th>Kontaktperson</th>
<th>Telefon</th>
<th>Region</th>
<th>Email Empfänger</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="carrier in carriers">
<td>{{ carrier.id }}</td>
<td><a :href="route.generate('carrier_show', {id : carrier.id })">{{ carrier.name }}</a></td>
<td>{{ carrier.contact_person }}</td>
<td>{{ carrier.phone }}</td>
<td><span v-if="carrier.region">{{ carrier.region.name }}</span></td>
<td>{{ carrier.email }}</td>
<td>
<a :href="route.generate('carrier_show', {id : carrier.id })"><span class="badge badge-secondary pointer" data-toggle="tooltip" data-placement="top" title="Spedition anzeigen"><i class="fa fa-info-circle" aria-hidden="true"></i></span></a>
<a :href="route.generate('carrier_edit', {id : carrier.id })"><span class="badge badge-info pointer" data-toggle="tooltip" data-placement="top" title="Spedition bearbeiten"><i class="fa fa-pencil-alt" aria-hidden="true"></i></span></a>
</td>
</tr>
</tbody>
</table>
</template>
<script>
import axios from 'axios';
export default {
name: "CarrierList",
data() {
return {
carriers: {},
route: FosRouting,
loading: false,
}
},
mounted() {
this.loading = true
axios.post(this.route.generate('api_carrier_list'))
.then(response => {
// JSON responses are automatically parsed.
this.carriers = response.data
})
.catch(e => {
this.errors.push(e)
});
},
methods: {}
}
</script>
<style scoped>
.loader{ /* Loader Div Class */
position: absolute;
top:0px;
right:0px;
width:100%;
height:100%;
background-color:#eceaea;
background-image: url('/images/ajax-loader.gif');
background-size: 50px;
background-repeat:no-repeat;
background-position:center;
z-index:10000000;
opacity: 0.4;
filter: alpha(opacity=40);
}
</style>
All is working right, the table will render with all the data that I get from the ajax request.
But now I want to add a simple div (for loading the ajax loading spinner) into the template:
<template>
<div class="loader" v-if="loading"></div>
<table class="table table-striped">
<thead>
<tr>
<th>ID </th> ....
But now, nothing will render. Why? I can't add a anywhere outside my table element.
Question:
What am I doing wrong and how can I add a single simple outside my table element and vuejs render my CarrierList Template?
Info:
I do not get an error in my console - nothing but the template still will not rendering.
When I remove the <div class="loader" v-if="loading"></div> the template will render and everything works normal.

Sort by all columns in table pure angular

I am trying to give a table the ability to sort by all columns, but having a bit of trouble. I am pulling some data from a webservice to populate the table but then want to sort wherever the user wants. I have a plunker here. Of my close attempt. I was thinking something like this:
$scope.order = function(predicate, reverse) {
$scope.recentalerts = orderBy($scope.recentalerts, predicate, reverse);
};
like from the angular website might work, but am having a bit of trouble integrating it into my own table. What am I doing wrong? Or is there an easier way to do so? I'd like to just stick with plain angular like this example.

Your example is working (after fixing the plunkR), however you always force reverse to false.
If you want to reproduce what Angular do, which is inverse the reverse parameter on each click, you could for instance add somehting like this:
$scope.orders[predicate] = !$scope.orders[predicate];
$scope.recentalerts = orderBy($scope.recentalerts, predicate, $scope.orders[predicate]);
See working plunkr:
http://plnkr.co/edit/Z9LDlWvwWV82D65pfiF6?p=preview
Or in a simpler form, use a common $scope.reverse attribute:
http://plnkr.co/edit/sMD7ZqmsJ7bULa26jo6q?p=preview

Here's a snippet of what I use for rolling my own sorting in tables. Simply using a string to determine what property I want to sort by (with reverse supported) and changing it dynamically, then using orderBy on the ng-repeat.
Hope this helps.
angular.module('app', [])
.controller('testCtrl', ['$scope',
function($scope) {
$scope.sortBy = 'ID';
$scope.sort = function(sortBy) {
if ($scope.sortBy == sortBy) {
$scope.sortBy = '-' + sortBy
} else {
$scope.sortBy = sortBy;
}
}
$scope.people = [{
'ID': 1,
'Name': 'Aaron',
'Age': 70
}, {
'ID': 28,
'Name': 'Ben',
'Age': 60
}, {
'ID': 2,
'Name': 'Claire',
'Age': 50
}, {
'ID': 14,
'Name': 'Damian',
'Age': 40
}, {
'ID': 8,
'Name': 'Frank',
'Age': 30
}];
}
]);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app="app">
<div ng-controller="testCtrl">
<div id="wrapper">
<div style="margin: 1em">
<h4>Recent Alerts</h4>
<div>
<table class="table table-hover table-striped">
<thead>
<tr>
<th ng-click="sort('ID')">ID
<i class="fa fa-caret-down" ng-show="sortBy=='-ID'"></i>
<i class="fa fa-caret-up" ng-show="sortBy=='ID'"></i>
</th>
<th ng-click="sort('Name')">Name
<i class="fa fa-caret-down" ng-show="sortBy=='-Name'"></i>
<i class="fa fa-caret-up" ng-show="sortBy=='Name'"></i>
</th>
<th ng-click="sort('Age')">Age
<i class="fa fa-caret-down" ng-show="sortBy=='-Age'"></i>
<i class="fa fa-caret-up" ng-show="sortBy=='Age'"></i>
</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="person in people | orderBy: sortBy">
<td ng-bind="person.ID"></td>
<td ng-bind="person.Name"></td>
<td ng-bind="person.Age"></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- /.col-lg-12 -->
</div>
</div>
</body>
</html>

EmberData RESTAdapter, regular refresh on one page with url filter

I have a Host model that is, for the moment, pretty simple:
App.Host = DS.Model.extend
name: DS.attr 'string'
The data adapter is handle by ember-data, my route looks like this:
App.HostsRoute = Ember.Route.extend
init: ->
#_super()
#refresh()
model: ->
#store.find 'host',
problematic: 1
refresh: ->
setTimeout =>
#store.find('host', { problematic: 1 }).then (hosts) =>
#controller.set 'content', hosts
#refresh()
, 10000
My template will show a list of boxes to list and manage nagios alerts:
<h2>Hosts list</h2>
<div class="row">
<div class="col-md-8">
{{#each host in controller}}
<div class="box box-solid box-default collapsed-box">
<div class="box-header">
<h5 class="box-title">
<i class="fa fa-server"></i>
{{ host.name }}
</h5>
<div class="box-tools pull-right">
<button class="btn btn-default btn-sm" data-widget="collapse"><i class="fa fa-plus"></i></button>
</div>
</div>
<div class="box-body no-padding table-responsive" style="display: none">
{{#link-to 'host' host}}{{host.name}}{{/link-to}}
<table class="table table-hover">
<colgroup>
<col/>
<col style="width: 100%"/>
<col/>
<col/>
</colgroup>
<thead>
<tr>
<th>Service</th>
<th>Message</th>
<th>State</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
{{/each}}
</div>
<div class="col-md-4">
{{outlet}}
</div>
</div>
My boxes are collapsed by default and can be uncollapsed by a js trick.
In each refresh, boxes are again collapsed. In fact, all the html is rewritten.
If I try without the problematic: 1 query parameter (calls /hosts instead of /hosts?problematic=1) it's works like a charm without rewriting all the html. The boxes stay uncollapsed.
So the problem source seems to be the additional query param but I don't know why.
What is wrong? How can I solve it?
Thanks.
UPDATE: Also tried with filter method:
model: ->
#store.filter 'host', {}, (host) ->
host.get 'problematic'
.then (hosts) ->
hosts
refresh: ->
setTimeout =>
#store.filter 'host', {}, (host) ->
host.get 'problematic'
.then (hosts) =>
#controller.set 'content', hosts
#refresh()
, 10000
But same problem, change nothing.
I have absolutely no idea of why this not works with filter or query param...