jsPDF + html2canvas in HTA/IE11 - promise

I want to generate a PDF from a hta file (http-equiv="x-ua-compatible" content="ie=11"). Append to child is working like a charme. However it doesn't work with jsPDF... Any help appreciated!
Scripts included:
<script src="polyfill.min.js"></script><!-- https://cdn.jsdelivr.net/npm/promise-polyfill#7/dist/polyfill.min.js -->
<script src="jspdf.js"></script><!-- https://github.com/MrRio/jsPDF/blob/master/src/jspdf.js -->
<script src="html2canvas.js"></script><!-- https://html2canvas.hertzen.com/dist/html2canvas.js -->
DIV to print:
<div class ="print" id="print">
<h3>print!</h3>
<input type="button" id="pdfPrint" value="PDF erstellen" />
</div>
Script Code:
document.getElementById('pdfPrint').addEventListener('click', function() {
html2canvas(document.getElementById("print")).then(function(canvas) {
// document.getElementById("print").appendChild(canvas);
var img = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new jsPDF();
pdf.addImage(img,'JPEG',20,20);
pdf.save('Testung.pdf');
}
});
});

I've made a test with your code. And I've found that there will be ReferenceError: 'jsPDF' is undefined in IE11.
The key point is the reference of jsPDF. You should replace your jsPDF script with latest one:https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.min.js
Then the running result is as the capture below:

Related

Image not able to load when using p5js outside of online editor

I am using p5js and I am trying to load and display some images in my directory. I am trying to use the loadImage() method in my preload function to load an image. However, when I run the program, I get these errors
Fetch API cannot load file:///Users/mainuser/Documents/school/Senior/FinalProject/imgs/arms_up.png. URL scheme "file" is not supported.
🌸 p5.js says: It looks like there was a problem loading your image. Try checking if the file path (imgs/arms_up.png) is correct, hosting the file online, or running a local server. (More info at https://github.com/processing/p5.js/wiki/Local-server)
TypeError: Failed to fetch
at fetch (p5.js:28096)
at p5._main.default.loadImage (p5.js:80673)
at p5.js:62949
at preload (script.js:118)
at p5._start (p5.js:62905)
at new p5 (p5.js:63261)
at _globalInit (p5.js:62189)
My imgs folder is within the same folder as my index.html
My guess is that fetch() might need an actual URL instead of a file path.
Anybody else run into this problem? I've attached my code below (i took out irrelevant code). Thank you!
index.html
<!DOCTYPE HTML>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs#1.3.1/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#teachablemachine/pose#0.8/dist/teachablemachine-pose.min.js"></script>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5#1.4.0/lib/p5.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Pose Game</h1>
<button type="button" onclick="init()">Start Game!</button>
<button type="button" onclick="restart_game()">Restart Game</button>
<div id="main-div">
<div id="flex-div">
<div id="webcam-div">
<canvas id="canvas"></canvas>
</div>
<div id="p5-div"></div>
</div>
</div>
</body>
</html>
script.js
let arms_up_png;
let left_arm_up;
let right_arm_up;
function preload() {
arms_up_png = loadImage("imgs/arms_up.png");
}
function setup() {
var canvas = createCanvas(400, 400);
canvas.parent('p5-div');
}
function draw() {
background('green');
image(arms_up_png, 50, 50, 20, 20);
}
You are correct that fetch() will not work with local file paths, and because p5js needs to load the contents of the image file in order to display it you also cannot use local file paths with the p5js loadImage() function. In order to run your sketch locally you will need to use a local web server. The Visual Studio Code Live Server extension is quite handy for this purpose.

Getting value from inside div using XPATH

I have the following div
<div data-dmid="product-detail-page" itemscope="" itemtype="http://schema.org/Product" itemid="3600542198158">
from which I would like to extract the itemid -> 3600542198158
I was using the following Xpath which does however not return any value:
//div[#data-dmid='product-detail-page']/#itemid
Could please someone advise how to built the Xpath correctly for it
#
Unfortunately I have to renew my question.
I was looking for the code with Firefox inspection tool.
Looking at the html source code which is different to the output with the inspection tool I have the following part which will be interesting:
<div class="onCanvas content-with-footer">
<div id="container-main" class="content-main">
<div data-dmid="uvp-banner-container" style="height: 54px; width: 100%"></div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var props = {};
ReactInit.initReactComponent("contentViewService", "UvpBannerContainer", props, document.querySelector("[data-dmid='uvp-banner-container']"));
});
</script>
<div id="react-product-detail-page"></div>
<script>
var props = {
gtin: 3600542198158,
locale: dmSettings.localeLanguage
};
ReactInit.initReactComponent("product-detail-page", "ProductDetailPage", props, document.getElementById("react-product-detail-page"));
$(document).ready(function () {
var props = {
locale: dmSettings.localeLanguage
};
ReactInit.initReactComponent("product-detail-page", "PriceLegend", props, document.getElementById("react-price-legend"));
});
</script>
I would need to get the gtin (plain number) of the second script.
I would like to use the xpath in a scraping tool why only plain xpath code will work for me.
Thank you again and please excuse my previous not fully correct question.
I am assuming that you don't mind JavaScript and jQuery since you didn't specify:
var itemId = $("div[data-dmid]").attr("itemid");
console.log(itemId);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-dmid="product-detail-page" itemscope="" itemtype="http://schema.org/Product" itemid="3600542198158">
I got the answer with help of another post on Stackoverflow.
Reading a javascript variable's value
The correct code for my updated question is
substring-before(substring-after(//div[#class='onCanvas content-with-footer']//script[2][contains(.,'gtin')]/text(), "gtin: "), ",")
Thank you for any help.

Pass object to browser with window.open in Edge

In case of Edge browser say Browser One, passing a custom argument to second Browser.
if I pass a string it is available in the second window. But, if I pass an object (say XMLDocument) in the second window, I could not serialzetoString.
var myWin = window.open(...);
myWin.customArg = 'string parameter' // Works
myWin.customArg = xmlObject // Doesnt Work
in the second window,
new XMLSerializer().serializeToString(xmlDoc)
throws xml parser exception.
Can any one help in resolving this?
Same code works fine for Chrome.
Edit - Sample code of Parent Window is here -
<html>
<head>
<script type="text/javascript">
function OpenWindow()
{
var objXML = '<SelectedCharts><Chart ColumnNo="1" ChartName="E0PK" GroupName="test" OrderNo="1" /></SelectedCharts>';
var xmlDoc = new DOMParser().parseFromString(objXML,'text/xml');
var dialog = window.open("Child_Window.htm", "title", "width=550px, height= 350px,left=100,top=100,menubar=no,status=no,toolbar=no");
dialog.dialogArguments = xmlDoc ;
dialog.opener = window;
}
</script>
</head>
<body>
<span>Passing an XML Object to the child window:</span>
<input type="button" value="Open Popup" onclick="OpenWindow()" />
</body>
</html>
And the sample code of Child window is here -
<html>
<head>
<script type="text/javascript">
function onBodyLoad()
{
alert(new XMLSerializer().serializeToString(window.dialogArguments));
}
</script>
</head>
<body onload="onBodyLoad()">
<span>This is child window.</span>
</body>
</html>
The code snippet shown in the question works fine for Chrome browser. And to pass the context to another window in case of Edge browser, follow the below method.
declare a global variable and set it in the parent window
And, access the varable in the child window using window.opener.
And sample code is provided in Pass custom arguments to window.open in case of Edge browser

having trouble running a fadein-fadeout Image banner

I am new in jquery I desperately need some help in running this code.I am trying to create a fade in-fade out image banner with 4 images within div tag, with the help of a function fadingbanner() which calls itself recursively and is initiated by a settimeout function.But for some reason its not working.Please help....
<HTML>
<HEAD>
<script type= "text/javascript" src="C:\Documents and Settings\A\Desktop\jquery-1.9.1.js"></script>
<SCRIPT>
<div>
<img src = "C:\Documents and Settings\A\Desktop\web_files\temp1.jpg" id = "i1">
<img src = "C:\Documents and Settings\A\Desktop\web_files\temp2.jpg" id = "i2">
<img src = "C:\Documents and Settings\A\Desktop\web_files\temp3.jpg" id = "i3">
<img src = "C:\Documents and Settings\A\Desktop\web_files\temp4.jpg" id = "i4">
</div>
function fadingbanner()
{
$(document).ready(function(){
$("#i1").fadeOut(2000,function(){
$("#i2").fadeIn(2000,function(){
$("#i2").fadeOut(2000,function(){
$("#i3").fadeIn(2000,function(){
$("#i3").fadeout(2000,function(){
$("#i4").fadeIn(2000,function(){
$("#i4").fadeout(2000,function(){
fadingbanner();
});
});
});
});
});
});
});
}
</SCRIPT>
</HEAD>
<BODY>
<IMG NAME = "bannerimage" src = "C:\Documents and Settings\A\Desktop\web_files\temp1.jpg" height = "200" width = "600" onload = "settimeout("fadingbanner()",1000)">
</BODY>
</HTML>
Take out the function and it should work ok. It is only defining a function and never running it. If it did run it, all it would do is schedule the code to run when the document finishes loading.
You also want to hide all but the first picture at the start.
So it should be like:
$(document).ready(function(){
$("#i2, #i3, #i4").hide();
$("#i1").fadeOut(2000,function(){
... all that other stuff
});
});
Here is a fiddle showing it: http://jsfiddle.net/ePBkX/1/
I borrowed the pictures there from the fiddle attached to this, which you might want to read: jQuery fade out then fade in

Uncaught [CKEDITOR.editor] The instance "html" already exists

I have a problem with loading CKEDITOR. I have made everything like described here: http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Integration But anyway i'm getting an error (Google Chrome 4.x) Uncaught [CKEDITOR.editor] The instance "html" already exists.
Here is my code:
<script type="text/javascript" src="/engine/jq.js"></script>
<script type="text/javascript" src="/engine/cke/ckeditor.js"></script>
<script type="text/javascript" src="/engine/cke/adapters/jquery.js"></script>
<textarea class="jquery_ckeditor" name="html" id="html" rows="10">text</textarea>
<script type="text/javascript">
if (CKEDITOR.instances['html']) { CKEDITOR.remove(CKEDITOR.instances['html']); // with or without this line of code - rise an error }
CKEDITOR.replace('html');
</script>
check this:
if (CKEDITOR.instances['html']) {
delete CKEDITOR.instances['html']
};
CKEDITOR.replace('html');
using the jquery ckeditor adapter - I was able to reinitialize ckeditor textareas in ajax content using this function.
function initCKEditor() {
$('.wysiwyg').ckeditor(function(e){
delete CKEDITOR.instances[$(e).attr('name')];
},{
toolbar:
[
['Bold','Italic','Underline','Strike','-','NumberedList','BulletedList','-','Paste','PasteFromWord','-','Outdent','Indent','-','Link','-','Maximize','-','Source']
],
skin: 'office2003'
}
);
}
remove class='ckeditor' as it's triggering the automatic replacement system.
Same error, getting it with the jQuery adapter though. Check the class of the textarea. As far as i can tell all text areas with class 'ckeditor' are automatically converted to editors. So either don't bother setting it with javascript or change the class.
http://ckeditor.com/blog/CKEditor_for_jQuery has a fix if you are using jQuery
// remove editor from the page
$('textarea').ckeditor(function(){
this.destroy();
});
Your page has a html container, try renaming your textarea ?
<textarea class="jquery_ckeditor" name="editor" id="editor" rows="10">text</textarea>
<script type="text/javascript">
CKEDITOR.replace('editor');
</script>
The solution that works for me: in an Ajax view, having two controls
#Html.TextAreaFor(model => model.offreJob.profile, new { #class = "input_text_area_nofloat", #style = "width:590px", #id = "ck_profile" })
and
#Html.TextAreaFor(model => model.offreJob.description_job, new { #class = "input_text_area_nofloat", #style = "width:590px", #id = "ck_description" })
I use the following script:
<script>
if (CKEDITOR.instances['ck_profile']) {
delete CKEDITOR.instances['ck_profile'];
}
CKEDITOR.replace('ck_profile');
if (CKEDITOR.instances['ck_description']) {
delete CKEDITOR.instances['ck_description'];
}
CKEDITOR.replace('ck_description');
</script>
Try this, hope it works, it worked for me.
for(html in CKEDITOR.instances['html')
{
CKEDITOR.instances[html ].destroy();
}
http://dev.ckeditor.com/ticket/9862#no1
Try this, it worked for me
var editor = CKEDITOR.instances["your_textarea"];
if (editor) { editor.destroy(true); }

Resources