I am a new user for JSReport, I want to build a template for phantomjs PDF that include a 2D Barcode, however, 2D Barcode content generate dynamically. Could anyone can guild? Thanks for helping.
This depends how you want to generate the barcode image.
One option is to use external (free) service which does this for you, then you just need to insert html image with proper url
<img src='https://www.barcodesinc.com/generator/image.php?code=ABCDEFG&style=197&type=C128B&width=180&height=50&xres=1&font=3'/>
You would typically fill the code using handlebars in jsreport like this
<img src='https://www.barcodesinc.com/generator/image.php?code={{code}}&style=197&type=C128B&width=180&height=50&xres=1&font=3'/>
Playground demo
https://playground.jsreport.net/w/anon/FnOXpvbt
Another option is using an npm module that can render the barcodes serverside like the bwip-js.
Playground demo
https://playground.jsreport.net/w/anon/EYFN1vXc
Thank you for give me some key point. I also found below script can generate 2D barcode also.
< img id='barcode'
src="https://api.qrserver.com/v1/create-qr-code/?data=HelloWorld&size=100x100"
alt=""
title="HELLO"
width="100"
height="100" />
I know this is an old question.
I need this function but the url does not work
Google has a solution
https://developers.google.com/chart/infographics/docs/qr_codes
<img src='https://chart.googleapis.com/chart?cht=qr&chl={{rowinfo.qrCode}}&chs=200x200&choe=UTF-8'/>
Related
I know how to insert an image using add image avaible on Layout Panel or using HTML.
However I want to make a condition : If the image is not avaible or doesn't exist, there is a default image I want to display.
So I think I need to do it with js function.
What is the best way for it?
you can use image tag in html for that.
<img id="img" src="SomeImage.jpg" onerror="this.onerror=null; this.src=default.png" alt="" width="100" height="120">
Specifically, I am building an app using Vuetify. I attempted to add an image to a card via v-card-media and using src. Checking the console, I can see that the .jpg I am using is listed, but the image does not show up. I admit I am new to Vue.js and JS so it may be some inexperience on my part, but I am quite lost and perplexed on this.
I am under the impression that with JS alone, there are some extra steps I must take to have an image be properly "read". Am I correct in my assumption that Vuetify removes those extra steps? That is to say, can I post and this will give the desired result without me having to create an additional function or am I horribly wrong? Any help is appreciated.
Inexperience strikes but tenacity saves the day. The issue I was having was that I was using:
<img src="src/assets/apple.jpg" alt="">
And instead I should have been using:
<img src="#/assets/apple.jpg" alt="">
Taking note of the "#" instead of src. I had searched many places but looked at the original demo site and saw the variation which is probably what I should have done from the start. C'est la vie.
Try this is for vuetify
<v-img src="#/assets/logo.png"></v-img>
I've included the package, the pdf gets generated but somehow the images dont appear on the pdf. The HTML content and CSS works like expected.
When i return the view as how you'd normally return a view in laravel, the receipt displays nicely along with the images.
But when i:
return PDF::html('receipt.show', $data);
The images dont appear.
My view file has the image like so:
<img class="img-responsive" src="img/receipt/banner.jpg">
The image is within:
public/img/receipt/banner.jpg
This is a laravel app running on homestead environment.
You need to use absolute path in image src attribute instead of relative. Smth like:
<img class="img-responsive" src="http://your-domain.com/img/receipt/banner.jpg">
You can use
<base href="http://your-domain.com/" />
into your head and it will help for all your links
I need to create a code to change an example text to a user-defined value when the user types in an input field (Similar to the preview field when writing a question on Stack Overflow).
This needs to be achieved without the use of HTML5 or Flash as the users will be running IE8, not all will have Flash plug-ins installed.
As such I have started by looking at DHTML to achieve the desired effect. Currently I can change the example text when a user types in the input field but only to a pre-defined value ("Example" in the code below), how should I edit this code to display the user-defined value?
JS
function changetext(id)
{
id.innerHTML="Example";
}
HTML
<form>
Content:<input type="text" id="input" onkeyup="changetext(preview)" />
</form>
<p id="preview">No content found</p>
You need to have something like this in the function:
function changetext(id){
var info = document.getElementById('input').value();
id.innerHTML = info;
}
This js is not fully correct. I would highly recommend you start using a javascript library like jQuery. It makes this a menial task.
Edited:
jQuery will work in IE8 just fine. in jQuery you will not need to attach js to your input. The code would look like this.
$('#input').click(function(){
$('#preview).html(this.val());
});
It is a lot cleaner and doesnt have js in the html.
Does anyone know how bing's weather webslice search works? I am attempting to create a web slice(only available in IE8) with search built in and I have read that forms are not allowed and neither is javascript. Any help would be appreciated.
You can create active content by defining it on another page using the entry-content rel attribute of an tag. In this example slice.aspx has JavaScript code on it.
<div class="hslice" id="MySlice">
<p class="entry-title">
My Active Slice</p>
<a rel="entry-content" href="slice.aspx" />
<div class="entry-content">
</div>
</div>
You can achieve a similar effect using some simple javascript in a Chrome extension to create an Arbitrary Web Slice extension but with the advantage of being able to take any slice out of any web page, not just predefined Web Slice areas like Bing weather. Obviously only works in Chrome but Firefox has a similar extension API in GreaseMonkey.