I have been using jsPDF and autoTable for quite a while and am now trying to update to the latest version of both; jsPDF 2.0.0 and autoTable 3.5.9 were both released a couple of days ago.
jsPDF itself is working fine but I'm getting the "doc.autoTable is not a function" error when trying to use autoTable.
Here's a very simple example:
<script src="https://unpkg.com/jspdf"></script>
<script src="https://unpkg.com/jspdf-autotable"></script>
<script>
const doc = new jspdf.jsPDF();
doc.autoTable({
head: [['Name', 'Email', 'Country']],
body: [
['David', 'david#example.com', 'Sweden'],
['Castille', 'castille#example.com', 'Spain']
]
});
doc.save('table.pdf');
</script>
You can see it in action (or not!) at https://jsfiddle.net/r8dah0m7/.
Has anyone managed to get autoTable 3.5.9 working with jsPDF 2.0.0 using downloaded / CDN dist files and if so, what am I missing?
Try the following
autoTable(doc, {
head: [['Name', 'Email', 'Country']],
body: [
['David', 'david#example.com', 'Sweden'],
['Castille', 'castille#example.com', 'Spain']
]
});
The documentation for 3.5.9 has not been updated.
Related
I'm using the code below to generate a HighCharts graph and get the base64 code from the SVG image generated. I'm then using an engine like php and the base64_decode function to decode the Base64 and generate a .png or .jpg image from that.
The problem I'm having is that php complains that the Base64 code is invalid. When I try that with the Base64 code for any other random image, php accepts it and the .png or .jpg is created immediately.
I'm conveniced it's not the php code, but it's something to do with the Base64 code I'm getting from HighCharts. I've tried the same exercise using other tools instead of php like ColdFusion and the result was the same. The ones generated by HighCharts never worked but others did.
I would appreciate some guidance if anyone has an idea. You can run the snippet below to check the Base64 generated. Thanks.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
<button id="add-image">Show base64 string for above chart</button>
<script type="text/javascript">
var chart = Highcharts.chart('container', {
series: [{
data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]
});
$("#add-image").click(function() {
var svg = $("#container").find('svg')[0],
svgData = new XMLSerializer().serializeToString(svg),
base64ImageValue = btoa(unescape(encodeURIComponent(svgData)));
document.getElementById('base64Container').innerHTML = base64ImageValue;
});
</script> <br><br>
<textarea id="base64Container" style="width:90%" rows="10"></textarea>
I am trying to use jsPDF, but when I use the CDN URL given below,
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.2.0/jspdf.umd.min.js"></script>
We get the following error,
Summary:4644 Uncaught ReferenceError: jsPDF is not defined
But when I use the one below which is the older version it works,
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.debug.js"></script>
Is the new version only for node?
You should use const doc = new window.jspdf.jsPDF(); in the newer verions.
Instead of const doc = new jsPDF();.
Here is where I found it:
https://github.com/MrRio/jsPDF/issues/2972
I'm trying to figure out the right way to use a Chart from chart.js in a Rails 6 app using webpacker. I would like my chart generation javascript code to remain in the page since I'll be dynamically generating it from the view.
I started with
yum add chartjs
then added to the application pack (and javascript_pack_tag is in my application.html.erb)
// app/javascript/packs/application.js
import Chart from "chartjs";
And then, in a view I try and use that library:
<div class="row">
<div class="col">
<canvas id="backlog-chart" width="100%" height="400px">
<script>
var ctx = document.getElementById('backlog-chart').getContext('2d');
new Chart(ctx, { ...
This fails with an Chart is not defined javascript error.
Things I've tried:
the require("chartjs") form of including the library in application.js seems to have no impact one way or the other.
I tried adding to config/webpack/environment.js to the ProvidePlugin object with Chart: "chartjs/chart.js" but no changes.
And I've tried adding import Chart from "chart.js" directly to the <script> section in the view but this fails with a "import only allowed in module" error on the browser.
My javascript skills have definitely not kept up with the last couple years of new technologies so any suggestions on the right way to do this would be appreciated.
You can't use Chart in a script in your HTML body because Chart hasn't been globably defined. You could import the chart.js javascript by embedding the script tag, and then Chart would be available. But you said you wanted to use Webpacker, so...
Include your chart definition in your application.js, rather than in the script tag.
// app/javascript/packs/application.js
import Chart from "chartjs";
var ctx = document.getElementById('backlog-chart').getContext('2d');
var myChart = new Chart(ctx, {...});
This will target that canvas in your HTML:
<canvas id="backlog-chart" ... />
I'm trying to get my Google Maps setup that previously worked with earlier versions of Rails to display using Rails 6. Obviously Rails 6 is now using webpack to handle javascript assets and I can't get my app to recognie the Gmaps function used to render the map.
Some of the basics:
Gemfile
gem 'geocoder'
gem 'gmaps4rails'
gem 'underscore-rails'
# maybe don't need ^ this underscore gem anymore
I installed underscore with yarn add underscore and also added the google maps script gmaps_google.js currently under vendor/javascripts folder which has been added to my resolved paths in webpacker.yml `app/javascript/packs/application.js file looks like:
require("#rails/ujs").start()
require("#rails/activestorage").start()
require("channels")
require("gmaps_google")
import "bootstrap";
import 'underscore'
import "../stylesheets/application";
window.jQuery = $;
window.$ = $;
Here is my actual show.html.erb view and attempted load of the map
<div style='width: 800px;'>
<div id="map" style='width: 800px; height: 400px;'></div>
</div>
<script>
const handler = Gmaps.build('Google');
handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
markers = handler.addMarkers([
{
"lat": <%= #user.latitude %>,
"lng": <%= #user.longitude %>,
"infowindow": "<%= #user.full_name %>'s location"
}
]);
handler.bounds.extendWith(markers);
handler.fitMapToBounds();
handler.getMap().setZoom(17);
});
</script>
Yet I still get no map loading on the page an error that says
Uncaught ReferenceError: Gmaps is not defined
It does load, and the error goes away when I load the gmaps script from an external CDN source in my HTML head, as this question suggests: Gmaps is not defined
So it is clearly just the loading/availability of that google_maps.js script. It's too massive of a file to show here, but here is the link to the working CDN version: cdn.jsdelivr.net/gmaps4rails/2.1.2/gmaps4rails.js
Copy-pasting that into my google_maps.js file doesn't help though. And I'm trying to figure out how I can get it to work with the Google Maps script residing within my Rails application and the webpack Rails 6 world is still very new to me. Any suggestions would be greatly appreciated.
The quick-and-dirty way is just load the gmaps4rails code (and underscore) from CDN instead of Webpack. Since you're just using a <script> tag to build the map, Webpack is not helping you there.
If you'd like to try using Webpack anyways, read on.
Understand that Webpack isolates itself from the global scope; unlike Sprockets, objects or values you import in Webpack will not be available in <script> tags or the browser console. If you want this behavior, you have to configure it by hand.
Looking at the gmaps4rails script, it appears not to be module-aware and assumes it's evaluated in the global scope (where underscore is available). In other words, it's not module-friendly. But we can make it play nice.
We need to tell Webpack to treat this in the gmaps4rails script as window, i.e., the global scope, and to "provide" underscore (or nearly interchangeable lodash, as below) since it assumes the _ lib is available in its scope.
In your shell:
$ yarn add imports-loader lodash
In config/webpack/environment.js:
const { environment } = require('#rails/webpacker')
const webpack = require('webpack')
environment.loaders.append('gmap4rails', {
test: /gmaps_google/,
use: [
{
loader: 'imports-loader',
options: 'this=>window',
},
],
})
environment.plugins.append(
'lodash',
new webpack.ProvidePlugin({
_: 'lodash',
})
)
module.exports = environment
Assuming you have set up your google scripts correctly per the gmaps4rails README, this should do the trick.
I've created a demo app with a working example in the example/gmap4rails branch (bring your own Google Maps API key): https://github.com/rossta/rails6-webpacker-demo/tree/example/gmaps4rails
I'm using jsPDF to generate a pdf from the current HTML, the code works fine if I paste it on the console and downloads a PDF with the current HTML, but when I put it on a JS file it downloads a blank PDF:
This is the code:
<script>
function descargar_pdf(){
var pdf = new jsPDF();
pdf.addHTML(document.body,function() {});
pdf.save('Estadodecuenta.pdf');
};
</script>
The function is called from a button:
<button class="descargar_pdf" id="ignorePDF" onclick="descargar_pdf();"> Descarga tu estado de cuenta</button>
The second argument in the addHTML function is a callback function which gets called after the HTML is rendered.
pdf.addHTML(document.body, function() {
pdf.save('*.pdf');
});
The last correctly working version of html2canvas is RC1. Downgrade to that one and it should work as expected.
This may sound stupid but there's a lot of security plugins that see JSPDF as an "unsafe" js and just block it , i had the same problem as you did but after testing it out on incognito mode (no extensions) it worked fine.
This may not the solution to your problem but its a advice you should keep in mind