I'm creating a web page and I need to make a button that prints a selected area. After several searches everything led me to implement html2canvas.
I installed it with
npm install html2canvas in the command prompt. In the official html2canvas website they mention
import html2canvas from 'html2canvas'; that I suppose I need to add in the top of my aspx file(?)
So far I've coded this code portion:
function getScreenshot() {
alert("bob");
html2canvas(document.body, {
onrendered: function(canvas) {
var canvasImg = canvas.toDataURL("image/jpg");
$('#test').html('<img src="' + canvasImg + '" alt="">');
}
});
var printContent = document.getElementById("row");
var printWindow = window.open("", "");
printWindow.document.write(printContent.innerHTML);
printWindow.document.write("<script src=\'http://code.jquery.com/jquery-1.10.1.min.js\'><\/script>");
printWindow.document.write("<script>$(window).load(function(){ print(); close(); });<\/script>");
printWindow.document.close();
};
<div id="test" class="body-content animated fadeIn">
<a href="javascript:getScreenshot()">
<img src="Images/printer.png" width="40" height="40" align="right">
</a>
</div>
The issue is when I click the button, no window opens for printing. The button works for sure because I get the alert window.
What am I missing for this to work? Can be a installation procedure? Can be bad attributes implementation?
Working fiddle: fiddle.
I would recommend opening a new html page where you include the element you're trying to print, along with a button "Print This Page" as is showed in the example below. And once user clicks on that button, thats when the browser's print page opens up.
This is the working function, all you need to do is call this function on click from your website's page, and change YOUR_ELEMENT to your container's id (#row in you case).
<script type="text/javascript">
function OpenPrintPage() {
var OriginalContent = document.getElementById('YOUR_ELEMENT').innerHTML;
var PrintWindow = window.open("","PrinterFriendlyPage","scrollbars=yes,status=yes,toolbar=yes,menubar=yes,resizable=yes,height=510,width=750");
PrintWindow.document.write( '<html><head><title>' + document.title +'</title></head><body><div id="' + 'content' + '">' + '</div><a class="printbtn" href="javascript:window.print()">Print This Page</a> </body></html>');
PrintWindow.document.close();
PrintWindow.document.getElementById('content').innerHTML += OriginalContent;
}
</script>
First make sure that you're including your script file correctly. There should be a <script> tag that includes a web-compatible version of your library. Most instructions that use npm install ...; import ... assume that you are using a web bundler like webpack or rollup to make a single bundled JavaScript file, or are using the new es6 module importer. That doesn't look like what you're doing here.
Instead, you can include a prebuilt version of html2canvas, like from https://html2canvas.hertzen.com/dist/html2canvas.js or https://unpkg.com/html2canvas#1.0.0-alpha.12/dist/html2canvas.js.
<script src="https://unpkg.com/html2canvas#1.0.0-alpha.12/dist/html2canvas.js"></script>
You can see a working example here: http://jsfiddle.net/u8Lz32k0/7/
Have you loaded the script in your web page? Can you post the beginning of your HTML file where you show all your imports?
Related
I am trying to use the function below to open an excel document on a specific sheet. When I used it on a standalone HTML document the function worked.
The Plone filtering is enabled to allow <script>
The site is running on IE 11 as I understand you must to use an ActiveXobject.
The text doesn't even underline in Plone like it does on my standalone test page I created.
Why exactly does the function not work in Plone?
<script type="text/javascript">
function Open_Excel_File(path,sheet)
{
fso = new ActiveXObject("Scripting.FileSystemObject");
if (!fso.FileExists(path))
alert("Cannot open file.\nFile '" + path + "' doesn't exist.");
else
{
var myApp = new ActiveXObject("Excel.Application");
if (myApp != null)
{
myApp.visible = true;
Book = myApp.workbooks.open(path);
var excel_sheet = Book.Worksheets(sheet).Activate;
myApp.range(f_range).Select;
}
else {
alert ("Cannot open Excel application");
}
}
}
</script>
<input type="button" value="Load" onclick="Open_Excel_File('C:\\Users\\user\\Desktop\\test1.xlsm', 'sheet2');"> </input>
Open with Href
you have to allow the needed tags in the html filter control panel. please don't use the properties in the ZMI anymore if you are using recend Plone version's. As the configuration is now saved in the plone.registry
Assuming you are injecting this javascript in a standard plone document page (or any rich texteditor field) you should enable <script> tag in ZMI:Plone/portal_transform/safe_html.
BTW, the best place to have support is official community: https://community.plone.org
I am editing a plone page to open an Excel document on a specific sheet. I created two buttons to see if either would appear as actual buttons and use the JS function I reference. With this code the exact part of the page looks like the image below.
Why is only text showing instead of the button and why is the onclick attribute not working?
Note: I have changed to links to the spreadsheet for posting it on here but the link has been tested on other webpages
<script type="text/javascript">
function Open_Excel_File(path,sheet)
{
fso = new ActiveXObject("Scripting.FileSystemObject");
if (!fso.FileExists(path))
alert("Cannot open file.\nFile '" + path + "' doesn't exist.");
else
{
var myApp = new ActiveXObject("Excel.Application");
if (myApp != null)
{
myApp.visible = true;
Book = myApp.workbooks.open(path);
var excel_sheet = Book.Worksheets(sheet).Activate;
myApp.range(f_range).Select;
}
else {
alert ("Cannot open Excel application");
}
}
}
</script>
<div>
<button onclick='Open_Excel_File("file://///fs-01\Departments\Underwriting\Statistical%20Data%20and%20Medical%20Information\Statistics\Cancers\Cancer%20Statistics%\Cancer%20Statistics%.xlsx", "Vulvar Ca");'>Open File</button>
<input type="button" onclick="Open_Excel_File('file://///fs-01\deps\uw\stat%20Data%20and%20Medical%20Information\Statistics\Cancers\Cancer%20Statistics%202018\Cancer%20Statistics%.xlsx', 'VCA');'>OPEN FILE</input>
</div>
your onclick value is not a function, it is the result of a function call. Try to change that to onclick="Open_Excel_File"; You'll have to provide the file path at some point
Accessing file system from browser is super restricted for security matters, the only way I see fit is to have a file input and using what user provides
Also Plone filter out a bounce of potential "nasty" tags through a specific configurable tool.
It seems to me that you have injected the in the source HTML of a Page (document) type.
If so, you will see in your browser that in, the page source code, the script tag has been totally stripped away.
So,
a correct way to inject some js in your page, is to load it as portal_javascript resource (plone<=4) or in resource_registry (plone>=5).
tha nasty way is to access, in the ZMI, at https://yourseite:8080/Plone/portal_transforms/safe_html/ and configure it to accept script tags inside a document (all document in your site actually).
If this answer does not satisfy you try to ask in the official community:
http://community.plone.org
hth,
alessandro
My requirement is to show .tiff image on browser. So currently I'm showing tiff file on Internet Explore using img tag like below.
<img src="myTiff.tif" type="image/tiff" alt="My Tiff">
And it works perfect with the tif file having only single page. In case there would an multiple pages in .tif then the img tag only shows 1st image. User can not get option to view other image.
Sample tiff image
I already tried all the option suggested here
I'm using C# on server side & on front end using AngularJS. Any help would appreciated. Thanks :)
Edit
Would it be better way to go with AltraTiff plugin? I looks like working on Internet Explorer.
Content rendering is always browser's responsibility so you rely in its capabilities.
Maybe there is some plugin for some browser that supports multiple-page tiffs, but, if you can't control software installed in your clients, I think your best option would be to implement some pagination by separating pages server side.
You can achieve that easily with imagemagick.
The only drawback is that, if user try to download it, it will download only the single page he were currently viewing.
But yo can mitigate it by providing separate download link or, simply, linking full version to the displayed image. Example using jQuery:
<div id="tiffPager">
<a href="myTiff.tif">
<img width=200 height=200 data-pageCount=5 src="myTiff_page0.tif" alt="My Tiff">
</a>
<button class="pageBack"><<</button>
<button class="pageForward">>glt;</button>
</div>
<script>
$(function(){
var container = $("div#tiffPager");
var img = $("img", container);
var backBtn = $("button.pageBack", container);
var fwBtn = $("button.pageForward", container);
var pgCount = img.data("pageCount");
var currPage = 0;
backBtn.on("click", function(){
currPage = (currPage + 1) % pgCount; // Cycle though pages.
img.attr("src", "myTiff_page" + currPage + ".tif");
});
fwBtn.on("click", function(){
currPage = (currPage - 1) % pgCount; // Cycle though pages.
img.attr("src", "myTiff_page" + currPage + ".tif");
});
});
</script>
First, sorry if my english isn't really good,
I have some google charts (using the API) and I want to transform them to images.
For do that, I use this code :
var chart_div = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(chart_div);
// Wait for the chart to finish drawing before calling the getImageURI() method.
google.visualization.events.addListener(chart, 'ready', function () {
chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
console.log(chart_div.innerHTML);
});
chart.draw(dataAge, optionsAge);
And the problem is that I have to place a div
<div id='chart_div'></div>
for seeing my image.
My question is how can I save that image on my server? Of course, after I had save her I want to use her for make a PDF document using a jsp file and a xsl and delete the image.
write javascript method that you have to be called on click of a button (or on any event).Inside the javascript method use jquery get or post method and send the image data to server. Image data can be initialized to a global variable and later send using calling the method
Recently i read all those questions about save google chart to image files on the disk but no one solution give me what i need. So i started to try with a kind of programs that simulate web browser and the result is perfect what i need.
This is what solved the question to me:
1) create a page with all you need, your google chart running, using your server-side language or not to create the final code and all other stuff.
2) download phantomjs (freeware), this is the webbrowser emulator.
3) phantomjs use a script that tell what it will do, the perfect script for this case is:
save.js
var page = require('webpage').create();
page.viewportSize = { width: 360, height: 150 };
page.open('http://your-webserver.com/yourgooglechart.html', function() {
page.render('image_to_save.png');
phantom.exit();
});
notice the viewportSize is the virtual size of your browser view.
4) run C:\blabla\phantomjs.exe save.js
worked like a charm
5) in my case, i schedule it to run every 5 minutes and consume this image in other place of my solution.
This type of code has incomptibilidades with IE and Firefox, it works fine with Chrome and Opera.
I could not find a solution to this Code specifically, but I use another method, which was compatible with all browsers.
For this I think on the main page container with an image inside a DIV and the occult
<div style="display:none;">
<img id="chartImg" />
</div>
Position the image that is generated with the API at the URL:
google.visualization.events.addListener(chart, 'ready', function () {
var imgUri = chart.getImageURI();
// do something with the image URI, like:
document.getElementById('chartImg').src = imgUri;
});
Then through openWin function, I think a pop and write within this image, a graphic, which can be copied on the derecgo botonn mouse and save it as PNG.
function openWin() {
var divText = document.getElementById("chartImg").outerHTML;
var myWindow = window.open('', '', 'width=500,height=500');
var doc = myWindow.document;
doc.write('<img' + ' id="graficar" ' +' />');
doc.write(divText);
doc.write("<p>This is 'myWindow'</p>");
doc.close();
}
In jsFiddle ahy an example to modify.
http://jsfiddle.net/rdmghzhm/7/
I'm currently trying to create a tweet button with the horizontal count feature dynamically:
JavaScript
var twitter = document.createElement('a');
twitter.setAttribute('href', 'http://twitter.com/share');
twitter.setAttribute('class', 'twitter-share-button twitter-tweet');
twitter.setAttribute('data-url','http://mindcloud.co.uk/idea/?idea=' + this.id);
twitter.setAttribute('data-count', 'horizontal');
twitter.setAttribute('data-via', 'jtbrowncouk');
twitter.style.top = '20px';
twitter.style.left = '300px';
twitter.innerHTML = "Tweet";
The problem i'm having is that the button is being displayed as a text link, not as a button with the horizontal count box.
I've created a facebook button in the same way, which works correctly, however to make it work I use the following:
JavaScript
var facebook = document.createElement('fb:like');
facebook.setAttribute('id', 'like'+this.id);
facebook.setAttribute('href', 'http://mindcloud.co.uk/idea/?idea=' + this.id);
facebook.setAttribute('layout', 'button_count');
facebook.setAttribute('send', 'false');
facebook.setAttribute('width' , '300');
facebook.setAttribute('font', '');
facebook.setAttribute('show_faces', 'true');
facebook.style.top = '0px';
facebook.style.left = '300px';
using the following:
FB.XFBML.parse();
to parse and draw the button. FB.XFBML.parse() comes from
http://connect.facebook.net/en_US/all.js
When I create the Tweet button statically inside a .html file it works correctly. I'm including the following script within my index page where the tweet button should be created dynamically:
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
If you can see what i'm doing incorrectly please inform me!
The following screenshot gives a visual explanation to what is going wrong with the tweet button!
Solution:
I've now managed to solve the problem. The problem i'd imagine is that the twitter script is running on load, and not being re-run upon creating the element.
using the following jQuery works correctly!
$.getScript("http://platform.twitter.com/widgets.js");
It's worth noting that as of recently you can use the following twitter widget function:
twttr.widgets.load();
Assuming you've loaded the widgets.js file:
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
This will dynamically re-create the tweet button for you.
I've now managed to solve the problem. The problem i'd imagine is that the twitter script is running on load, and not being re-run upon creating the element.
using the following jQuery works correctly!
$.getScript("http://platform.twitter.com/widgets.js");
You're just using the wrong code. To specify the URL, you use url, not data-url. This works:
var twitter = document.createElement('a');
twitter.setAttribute('href', 'http://twitter.com/share');
twitter.setAttribute('class', 'twitter-share-button twitter-tweet');
twitter.setAttribute('url','http://mindcloud.co.uk/idea/?idea=' + this.id);
twitter.setAttribute('data-count', 'horizontal');
twitter.setAttribute('data-via', 'jtbrowncouk');
twitter.style.top = '20px';
twitter.style.left = '300px';
twitter.innerHTML = "Tweet";
For more details, check out Twitter's documentation at https://dev.twitter.com/docs/tweet-button#properties