I'm getting error Uncaught referenceError while trying to use jsPDF library
Here is my code snippets and I'm using jsPDF library version 2.0
var myState = {
pdf: null,
currentPage: 1,
zoom: 1
}
pdfjsLib.getDocument('/res/Pdf/164665736913e501e1e5bc3b6bb21707602ce363055efbcdaa6725e0216cce41ffc18c070b.pdf').then((pdf) => {
myState.pdf = pdf;
render();
});
}
render() {
myState.pdf.getPage(myState.currentPage).then((page) => {
var canvas = document.getElementById("pdf_renderer");
var ctx = canvas.getContext('2d');
var viewport = page.getViewport(myState.zoom);
canvas.width = viewport.width;
canvas.height = viewport.height;
page.render({
canvasContext: ctx,
viewport: viewport
});
});
}
}```
Related
I started an ASPNET MVC project and I tried to load a gltf object
GLTFLoader.js -> https://github.com/mrdoob/three.js/blob/master/examples/js/loaders/GLTFLoader.js
But my object isn't found... chrome console :
Project files:
I added something in web config:
<script src="~/Scripts/three.js"></script>
<script src="~/Scripts/OrbitControls.js"></script>
<script src="~/Scripts/GLTFLoader.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
test: 'xd'
}
});
</script>
<script>
var scene, renderer, camera;
var cube;
var controls;
function initialize() {
scene = new THREE.Scene();
scene.background = new THREE.Color(0xdddddd);
camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
camera.lookAt(new THREE.Vector3(0, 0, 0));
camera.rotation.y = 45 / 180 * Math.PI;
camera.position.set(800, 100, 1000);
ambientLight = new THREE.AmbientLight(0x404040, 100);
scene.add(ambientLight)
renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
$('#object').append(renderer.domElement);
let loader = new THREE.GLTFLoader();
loader.load('Cars/tutorial/scene.gltf', function (gltf) {
car = gltf.scene.children[0];
car.scale.set(0.5, 0.5, 0.5)
scene.add(gltf.scene);
renderer.render(scene, camera);
})
}
initialize();
</script>
Thanks!
Hi i created invoice page and added to them jsPDF and html2canvas, but my solution generated blank pdf. How can I repair this? where is a bug ?
In my project used jspdf and html2canvas, can you help me with this?
Script:
$(document).ready(function() {
function generatePDF() {
window.scrollTo(0, 0);
var pdf = new jsPDF('p', 'pt', [1380, 2030]);
html2canvas($(".page-section")[0], {
onrendered: function(canvas) {
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
var imgData = canvas.toDataURL("image/png", 1.0);
var width = canvas.width;
var height = canvas.clientHeight;
pdf.addImage(imgData, 'PNG', 20, 20, (width - 10), (height));
}
});
setTimeout(function() {
pdf.save('sample.pdf');
var blob = pdf.output("blob");
var blobURL = URL.createObjectURL(blob);
var iframe = document.getElementById('sample-pdf');
iframe.src = blobURL;
var downloadLink = document.getElementById('pdf-download-link');
downloadLink.href = blobURL;
}, 0);
};
generatePDF();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://instamarketing.pl/cennik/js/jspdf.min.js"></script>
<script type="text/javascript" src="https://instamarketing.pl/cennik/js/html2canvas.js"></script>
<div class="page-section">
test
</div>
I have an order detail page that I want to turn into a pdf. The details are dynamically created on our backend but I want to use the front end to create the pdf so I am using jsPDF.
Here is my code:
<script>
function demoFromHTML() {
var doc = new jsPDF('p', 'in', 'letter');
var source = $('#open_orders_detail_display_template').first();
var specialElementHandlers = {
'#bypassme': function(element, renderer) {
return true;
}
};
doc.fromHTML(
$('#open_orders_detail_display_template').get(0),
0.5, // x coord
0.5, // y coord
{
'width': 7.5, // max width of content on PDF
'elementHandlers': specialElementHandlers
});
doc.output('dataurl');
}
</script>
When I run it I don't get any errors but a blank page populates. Any help would be greatly appreciated.
Thanks!
var doc = new jsPDF();
// We'll make our own renderer to skip this editor
var specialElementHandlers = {
'#editor' : function(element, renderer) {
return true;
}
};
// All units are in the set measurement for the document
// This can be changed to "pt" (points), "mm" (Default), "cm", "in"
doc.fromHTML($('#render_me').get(0), 30, 50, {
'width' : 170,
'elementHandlers' : specialElementHandlers
});
doc.save('sample-file.pdf');
Give id="render_me" to div what you want to render.
for example
<table id="render_me"></table>
Here is the source code, pretty simple, but do not work.
// this is the html file
<html>
<head>
<title>Test</title>
<style>
body { background: pink }
canvas { background: orange }
</style>
<script src="utils.js"></script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec4 aVertexPosition;
void main() {
gl_PointSize = 10.0;
gl_Position = aVertexPosition;
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
</script>
<script>
var canvas, gl, shaderProgram;
window.onload = function() {
initCanvasAndGL("canvas", canvas, gl);console.log(gl);
initProgram(gl, shaderProgram);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
var aVertexPosition = gl.getAttribLocation(shaderProgram, "aVertexPosition");
canvas.onmousedown = function(e) {
onCanvasMouseDown(e, aVertexPosition, canvas, gl);
}
}
function onCanvasMouseDown(e, aVertexPosition, canvas, gl) {
var x = e.pageX;
var y = e.pageY;
x = (x - canvas.width / 2) / (canvas.width / 2);
y = (canvas.height / 2 - y) / (canvas.height / 2);
gl.vertexAttrib2f(aVertexPosition, x, y);
gl.drawArray(gl.POINTS, 0, 1);
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="400">
Canvas Not Supported! :(
</canvas>
</body>
</html>
and this is the utils.js file
function initCanvasAndGL(canvasID, canvas, gl) {
canvas = document.getElementById(canvasID);
var names = [
"webgl", "experimental-webgl",
"webkit-3d", "moz-webgl"
];
for(var i = 0; i < names.length; ++i) {
try {
gl = canvas.getContext(names[i]);console.log("i: " + i + "gl: " + gl);
} catch(e) {}
if(gl) {
break;
}
}
if(!gl) {
alert("WebGL is not available! :(");
}
}
function getShader(gl, id) {
var shaderScript = document.getElementById(id);
if(!shaderScript) {
return null;
}
var str = "";
var k = shaderScript.firstChild;
while(k) {
if(k.nodeType == 3) {
str += k.textContent;
}
k = k.nextSibling;
}
var shader;
if(shaderScript.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else if(shaderScript.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else {
return null;
}
gl.shaderSource(shader, str);
gl.complieShader(shader);
if(!gl.getShaderParameter(shader, gl.COMPLIE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}
return shader;
}
function initProgram(gl, shaderProgram) {
var vertexShader = getShader(gl, "shader-vs");
var fragmentShader = getShader(gl, "shader-fs");
shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
if(!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders! :(");
}
gl.useProgram(shaderProgram);
}
the console traces Uncaught TypeError: Cannot read property 'VERTEX_SHADER' of undefined.So I add two console.log() in window.onload() function and initCanvasAndGL() function.And the result is:
i: 0gl: null utils.js:10
i: 1gl: [object WebGLRenderingContext] utils.js:10
undefined
I really don't know why! who can help me? thanks.
The code had multiple minor issues.
Please find a fixed version here:
webgl_mousedown.html
utils.js
I have this fiddle
JS Fiddle
I want to limit the pinch zoom out of a canvas on iPad Safari. When i pinch out the canvas shrinks and becomes small. Is there any way i can limit the zoom out level on this particular device? I am using KineticJS.
Here's my code below of the fiddle
div id="container"></div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
init();
});
function init() {
var lastDist = 0;
var startScale = 1;
function getDistance(p1, p2) {
return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2));
}
var image = new Image();
image.onload = function() {
kimage = new Kinetic.Image({
image: image,
x : 0,
y : 0
});
var stage = new Kinetic.Stage({
container: 'container',
width: 500,
height: 500
});
var layer = new Kinetic.Layer();
var group = new Kinetic.Group({
draggable: true,
dragBoundFunc: function(pos) {
var newX = 0;
if (pos.x < 0) {
newX = pos.x < stage.getWidth() - kimage.getWidth()
? stage.getWidth() - kimage.getWidth() : pos.x;
}
var newY = 0;
if (pos.y < 0) {
newY = pos.y < stage.getHeight() - kimage.getHeight()
? stage.getHeight() - kimage.getHeight() : pos.y;
}
return {
x: newX,
y: newY
};
}
});
stage.getContent().addEventListener('click', function(evt) {
var touch1 = evt.touches[0];
var touch2 = evt.touches[1];
if(touch1 && touch2) {
var dist = getDistance({
x: touch1.clientX,
y: touch1.clientY
}, {
x: touch2.clientX,
y: touch2.clientY
});
if(!lastDist) {
lastDist = dist;
}
var scale = stage.getScale().x * dist / lastDist;
stage.setScale(scale);
stage.draw();
lastDist = dist;
}
}, false);
stage.getContent().addEventListener('touchend', function() {
lastDist = 0;
}, false);
group.add(kimage);
layer.add(group);
stage.add(layer);
layer.draw();
}
image.src = 'http://www.ourclientwebsites.com/html5/images/1.jpg';
}
</script>
Add a viewport meta tag:<meta name="viewport" content="width=device-width, user-scalable=no">. This will prevent the page from zooming, while still allowing your app to grab the Javascript event.