Trying to build a test pdf with jspdf 1.5.3 and it works fine with jsfiddle. But when I use the exact same script on my apache or iis servers, chrome cannot open the pdf. When I look at the pdf in a text viewer, it appears my version has some additional binary code.
This is the script:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript">
var doc = new jsPDF();
doc.text('Hello world!', 10, 10);
doc.save('xyz.pdf');
</script>
</head>
<body>
</body>
</html>
Working version on jsfiddle:
https://jsfiddle.net/orz3jb4v/
Here is a screenshot of both versions side by side in text editor:
https://i.imgur.com/bLi6f1E.png
(Invalid pdf on left)
Edit: After testing, this only happens with version 1.5.3. Reverting to 1.5.2 works perfectly fine. I can't find why this only happens on certain servers.
Related
I have a new problem with an old script. The problem is already exist with an old (1.5.3) and the newest (2.5.1) jsPDF version.
Until recently, the Save or View dialog was displayed when creating a PDF in the browser. Now it works only if the browser (Firefox) is disabled to show PDF. In default mode the PDF is displayed as blob and has a URL without the filename specified by the script in jsPDF.
The console displays the message Warning: Invalid absolute docBaseUrl: "blob:https://www.example.com/25dao98-787zhz98-098kiio54". and PDF 7a55842e15bbd5545545114f2211 [1.3 jsPDF 2.5.1 / example.com] (PDF.js: 2.14.13) .
What do I have to do to open the Save or View dialog in the browser again when creating the PDF?
I use the CDN (jspdf.min.js) versions in my website and only uncomplicated draw, text, font and image function.
Here a example from the jsPDF Github page:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
</head>
<body>
<script>
function myfunc() {
var { jsPDF } = window.jspdf;
var doc = new jsPDF();
doc.setFont(undefined, 'normal');
doc.text("Hello world! " + Date.now(), 10, 10);
doc.setFont(undefined, 'bold');
doc.text("Hello world! " + Date.now(), 10, 20);
doc.save("a4.pdf");
}
</script>
<button onclick="myfunc();">Button</button>
</body>
This as jspdf.html on my webspace and in firefox opens a blob. And the same on jsfiddle save the pdf file in the default download directory with the correct filename and opens it in a new tab.
https://jsfiddle.net/awk6hd7t/
I don't need blob.
I am trying to integrate the ThebeLab javascript library with my web application. Now so far, using their example code, I am able to integrate successfully. ThebeLab uses a Codemirror editor for its input field. And as per ThebeLab's official documentation, we can even customize the Codemirror editor using the configuration settings provided by Codemirror itself.
Now, when I am trying to customize the Codemirror editor using the example provided by ThebeLab, it is not working. It doesn't even throw any kind of error in console either. Even, the example provided by the ThebeLab on their official web page is itself doesn't work.
Now, this issue is already raised and closed on their official GitHub repository. And as per them, the solution is already provided with the newer version(0.5.1) of ThebeLab javascript. And I am also using the newer version which is 0.5.1, but still, it is not working.
This is my code:
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<title>Thebe Lab examples</title>
<!-- Configure and load Thebe !-->
<script type="text/x-thebe-config">
{
bootstrap: true,
requestKernel: true,
kernelOptions: {
name: "python3",
serverSettings: {
"baseUrl": "http://127.0.0.1:8888",
"token": "test-secret"
}
},
codeMirrorConfig: {
theme: "abcdef"
},
}
</script>
<script type="text/javascript" src="https://unpkg.com/thebelab#latest" ></script>
</head>
<body>
<h1>Thebe Lab: using a local server</h1>
<p>This page illustrates how to setup Thebe Lab, using a local Jupyter server as kernel provider. This assumes that you have started the local server as:
<pre>
jupyter notebook --NotebookApp.token=test-secret --NotebookApp.allow_origin='<span id="origin">*</span>'
</pre>
and that it's running on port 8888
</p>
<pre data-executable="true" data-language="python">print("Hello!")</pre>
<script type="text/javascript">
document.getElementById('origin').innerHTML = location.origin;
</script>
</body>
</html>
Kindly help me out here soon. Thank you.
I need to initialize the VSS.SDK from a .ts class (outside the html page). I have analyzed some examples from Microsoft and all are initialize under html page.Is it possible to do this outside html page?
You can refer to this link for details: Visual Studio Services Web Extension SDK.
Types
Types of VSS.SDK.js, controls and client services are available in typings/vss.d.ts.
REST Client types for VSTS are available in typings/tfs.d.ts
REST Client and extensibility types for Release Management are available in typings/rmo.d.ts
Using tsd
Although TypeScript declare files do not exist at DefinitelyTyped repo, they can still be used through tsd.
First, make sure that the dependencies are loaded using below
command:
tsd install jquery knockout q --save
Next, run below command to get
vss-web-extension-sdk types added to tsd.d.ts:
tsd link
Finally, add only reference to typings/tsd.d.ts in your
TypeScript files.
Yes, you could to do it outside the html and put it in the JavaScript file or other (e.g. ts), then add the reference to corresponding JS file to the html page.
For example:
VSS.init();
$(document).ready(function () {
VSS.notifyLoadSucceeded();
});
<!DOCTYPE html>
<html>
<head>
<title>Hello word</title>
<meta charset="utf-8" />
<script src="node_modules/vss-web-extension-sdk/lib/VSS.SDK.js"></script>
<script src="Scripts/VSSInit.js"></script>
</head>
<body>
<!--<script type="text/javascript">
VSS.init();
</script>-->
<h1>Hello word</h1>
<!--<script type="text/javascript">
VSS.notifyLoadSucceeded();
</script>-->
</body>
</html>
I am experiencing some very odd problems with Polymer.dart when compiled to javascript. It works fine in Dartium. This app did work a couple of months ago. However Polymer has undergone lots of changes since then, so I have had to make loads of changes just to get it to compile. I have tried this in polymer 3.2 through to the latest build in pub, all behave the same. I am running an up to date Dart install on the stable branch.
I get the following Javascript error:
TypeError: $document.register is not a function
On the last line of the js below. The tag variable is "polymer-element".
})(H.convertDartClosureToJS(W._callAttributeChanged$closure(), 4)))};
proto = Object.create(baseConstructor.prototype, properties);
t2 = H.makeLeafDispatchRecord(interceptor);
Object.defineProperty(proto, init.dispatchPropertyName, {value: t2, enumerable: false, writable: true, configurable: true});
options = {prototype: proto};
if (!t1)
options.extends = extendsTagName;
$document.register(tag, options);
From what I can see the polyfills aren't loading so the document.register method hasn't been declared.
Below is from my HTML File
<head>
<script src="index.dart" type="application/dart"></script>
<script src="packages/browser/dart.js"></script>
<script src="packages/browser/interop.js"></script>
</head>
My index.dart looks like
void main() {
window.alert("Dart Lives!");
initPolymer().run(() => initPresentation());
}
void initPresentation() {
//Show the first screen
}
When running under Javascript I get the alert box showing followed by the Javascript error. So I don't think there is anything wrong with the basic dart environment.
EDIT
This has changed.
An up-to-date answer is here
Polymer querySelector working on DartVM but not in Chrome after compile
OLD
Hard to tell.
I think index.dart should look like
<head>
<script type='application/dart'>
export 'index.dart';
</script>
</head>
or
<body>
...
<script type='application/dart' src='index.dart'></script>
</body>
see https://code.google.com/p/dart/issues/detail?id=17546#c16
I'm trying to get my dummy Dart webapp running in browsers. Here's the code of my html page:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<!-- Always force latest IE rendering engine or request Chrome Frame -->
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
</head>
<body>
<div id='button'>hello world</div>
</body>
<script src='my_app.dart' type='application/dart'></script>
<script src='packages/browser/dart.js'></script>
</html>
and this is what I'm getting in js console when trying to open it:
GET http://localhost:4567/my_app.dart.js 404 (Not Found)
(I'm running it on a local server, thus the url - got the same error if simply opening an html file though).
If I open the same url in Dartium, the webapp works. So the problem, I suppose, is that dart.js doesn't work as expected. What could be the problem?
packages/browser/dart.js is a bootstrap script that checks if a Dart VM is available on your browser. If a Dart VM is available, your dart script is executed directly, otherwise packages/browser/dart.js appends to the document a new js script with a url that points to a file with the same name as your dart file but with a appended .js. Depending on how you work you may have to generate this JS file manually with dart2js :
dart2js --out=my_app.dart.js my_app.dart
Try to "Run as Java Script" it should generate additional files like "my_app.dart.js"