I have a spring boot app that generates a pdf with itext,
I'm trying to add a map when generating it.
I didn't find any way to add the leaflet.
my example:
<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/mvc">
<head>
<title>Leaflet</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.6.0/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
<script src="https://unpkg.com/leaflet#1.6.0/dist/leaflet.js" integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew==" crossorigin=""></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
</head>
<body>
<div id="mapid" style="width: 100%; height: 750px;"></div>
<script th:inline="javascript">
var mymap = L.map('mapid').setView([0, 0], 4);
L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
attribution: 'Corona Virus'
}).addTo(mymap);
</script>
</body>
</html>
any suggestion?
as far as I know, it is not possible to save as pdf the result of the javascript code. I suggest that you look how to get the map as an image and then you can pass the url of that image (or base64 encoding) to your template and convert to pdf.
Check example usages: http://sampleserver1.arcgisonline.com/arcgis/sdk/rest/export.html
Related
I have done literally everything to make it work but it is not working yet
I loaded from cdn just as it is in the preview documentation
<!-- add to document <head> -->
<link href="https://unpkg.com/filepond/dist/filepond.css"
rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-
plugin-image-preview.css" rel="stylesheet">
<!-- add before </body> -->
<script src="https://unpkg.com/filepond-plugin-image-
preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
To enhance into a filepond element I have
<script>
const inputElement = document.querySelector('input[type="file"]');
const pond = FilePond.create( inputElement );
</script>
and lastly
<input type="file">
It just shows up as a file and not with image preview. What am I missing?
The plugins have not been registered with FilePond.
This should work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FilePond Plugin Image Preview Demo</title>
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
</head>
<body>
<input type="file"/>
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<script>
// Register the plugin with FilePond
FilePond.registerPlugin(FilePondPluginImagePreview);
// Get a reference to the file input element
const inputElement = document.querySelector('input[type="file"]');
// Create the FilePond instance
const pond = FilePond.create(inputElement);
</script>
</body>
</html>
Live demo here: https://pqina.github.io/filepond-plugin-image-preview/
I'm looking at the docs and I see how this is confusing, will improve them as soon as I have some time.
I want to make a pdf invoice from blade template using Dompdf in Laravel 5.5.
The problem is when clicking on the download button the page is loading and after ~3 min i the pdf starts downloading.
Why is it taking so long?
the download link
<i class="fa fa-file-pdf-o"></i> Download Invoice
web route:
Route::get('/order/download-invoice/{OrderID}', 'Admin\AdminOrderController#downloadOrderInvoice')->name('admin.download-invoice');
a simple template (invoice.blade.php)
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other
head content must come *after* these tags -->
<title>Invoice</title>
<link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}" media="screen">
</head>
<body>
<div>{{ $invoice->InvoiceTitle }} </div>
</body>
</html>
donwload invoice controller function:
use Barryvdh\DomPDF\Facade as PDF;
public function downloadOrderInvoice($OrderID){
$invoice = Invoice::where('OrderID', $OrderID)->first();
$pdf = PDF::loadView('invoice.invoice', compact('invoice'))->setPaper('a4', 'landscape');
return $pdf->download('invoice.pdf');
}
What i did wrong? Did i miss something?
UPDATE
clear the header and using EXTERNAL CDN bootstrap works.
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
Why is not using the local bootstrap using asset???
<link href="{{asset('css/bootstrap.min.css')}}" rel="stylesheet">
I'm trying to get a very basic d3 visualization working, but all I get is a blank browser window.
Here's my index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="code.js"></script>
<title>My Title</title>
</head>
<body>
<div class="container"></div>
</body>
</html>
Here's my code.js:
console.log("test");
d3.select("body").append("h1").html("Here are some words")
My console prints test. But nothing appears in the browser window. When I inspect element, nothing has been added.
I've tried loading the localhost page via python -m SimpleHTTPServer and via npm install -g http-server plus http-server &.
What's going wrong?
you need to change your HTML code for the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<title>My Title</title>
</head>
<body>
<div class="container"></div>
<script type="text/javascript" src="code.js"></script>
</body>
</html>
I just put the line which reference the "code.js" inside the body tags
Current scheduler working with google calendar. But not mobile friendly.
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title></title>
</head>
<script src="./codebase/dhtmlxscheduler.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="./codebase/dhtmlxscheduler.css" type="text/css" media="screen" title="no title" charset="utf-8">
<style type="text/css" media="screen">
html, body{
margin:0px;
padding:0px;
height:100%;
overflow:hidden;
}
</style>
<script type="text/javascript" charset="utf-8">
function init() {
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.init('scheduler_here',new Date(2013, 7, 5),"week");
scheduler.load("./data.php", "json");
var dp = new dataProcessor("./data.php");
dp.init(scheduler);
dp.setTransactionMode("POST", false);
}
</script>
<body onload="init();">
<div id="scheduler_here"></div>
</div>
</body>
Current Scheduler that is mobile friendly but won't get events from google calendar.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no">
<script src="cal/webix.js" type="text/javascript"></script>
<script src="cal/scheduler/scheduler.js" type="text/javascript"> </script>
<link rel="stylesheet" type="text/css" href="cal/skins/touch.css">
<link rel="stylesheet" type="text/css" href="cal/scheduler/scheduler.css">
<title></title>
<script type="text/javascript" charset="utf-8">
webix.ready(function() {
scheduler.config.hour_date = "%g:%i%a";
scheduler.config.readonly = true;
webix.ui.fullScreen();
webix.ui({
view: "scheduler",
id: "scheduler"
});
$$("scheduler").load("data.json", "json");
});
</script>
</head>
<body>
<div id="scheduler"></div>
</body>
</html>
Can't seem to figure out how to merge them or create a new code that has the css to be mobile friendly but still get data from a google calendar.
In case of json data source, both desktop and mobile scheduler must be able to share the same data source, so code like next must work
$$("scheduler").load("data.php", "json");
I am failing to see why I cannot get waypoints to work. Code is below, what am I missing (it must be something small and simple)
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script src="http://imakewebthings.com/jquery-waypoints/waypoints.min.js"> </script>
<script>
$('#waypoint').waypoint(function () {
alert('You have scrolled to an entry.');
}, {
offset: '100%'
});
</script>
</head>
<body>
<div style="height: 1500px">Scroll down</div>
<div id="waypoint">Waypoint</div>
</body>
</html>
It doesn't look like you're including the jquery library, which is required.
<head>
<meta charset="utf-8" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://imakewebthings.com/jquery-waypoints/waypoints.min.js"> </script>