I have a web app that creates pdf files and shows a preview. Like so
...
<body>
<iframe id="preview" src=""></iframe>
<script src="jspdf.min.js"></script>
<script>
var doc = new jsPDF()
doc.text(5, 5, 'Hello, world!')
document.getElementById("preview").src = doc.output("datauristring")
</script>
</body>
...
Problem is, it doesn't work e.g. in IE. So I want to make a desktop app using electron.js. According to this post: >Electron PDF viewer there is a pdf viewer in electron, but the iframe (or webview) is always empty.
Is it somehow possible?
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.
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.
I want to display product specification from an external service. To do that I have to pass the below JS string to Webview.
<!DOCTYPE html>
<html>
<body>
<div id="flix-minisite"></div>
<div id="flix-inpage"></div>
<script
type="text/javascript"
src="http://media.flixfacts.com/js/loader.js"
data-flix-distributor="12612"
data-flix-language="id"
data-flix-brand="Samsung"
data-flix-mpn="UA55JU6600KPXD"
data-flix-ean=""
data-flix-sku=""
data-flix-button="flix-minisite"
data-flix-inpage="flix-inpage"
data-flix-button-image=""
data-flix-fallback-language="e2"
data-flix-price=""
async>
</script>
</body> </html>
I've added the below method:
webview.NavigateToString("htmlString");
Adding this just displays the text from the service, but the images and videos are not getting displayed.
Expected result :
http://media.flixcar.com/delivery/minisite/show/12612/id/957752
What I'm I doing wrong?
For me, it doesn't work because the following script in not correctly added to your html page:
<script type="text/javascript" src="//media.flixcar.com/delivery/static/inpage/9/js/lazy.js"></script>
It is dynamically added by the script http://media.flixcar.com/delivery/static/inpage/9/js/append.js.
The url should be http://media.flixcar.com/delivery/static/inpage/9/js/lazy.js so as be correctly loaded by the webview (which is nothing else than Edge browser).
I also think that you need to update each image attributes. Currently they are added also without protocol which are not supported by all browsers (for me it only works with Chrome).
<div class="flix-feature-image">
<img src="//media.flixcar.com/delivery/static/mobile/standard/img/loading_icon.gif"
data-srcset="//media.flixcar.com/f360cdn/Samsung-1601328499-id-feature-uhd-ju6600-ua65ju6600kpxd-52938564 2x, //media.flixcar.com/f360cdn/Samsung-1601328499-id-feature-uhd-ju6600-ua65ju6600kpxd-52938564 770w">
</div>
Adding protocol will fix the issue:
<div class="flix-feature-image">
<img src="http://media.flixcar.com/delivery/static/mobile/standard/img/loading_icon.gif"
data-srcset="http://media.flixcar.com/f360cdn/Samsung-1601328499-id-feature-uhd-ju6600-ua65ju6600kpxd-52938564 2x, http://media.flixcar.com/f360cdn/Samsung-1601328499-id-feature-uhd-ju6600-ua65ju6600kpxd-52938564 770w">
</div>
I've been using rails for past few days and wanted to know what is best way to show image previews before upload in rails & carrierwave.
I came across a few options like using plupload or jquery file upload or using uploadify.
If you only need image preview in a form before upload, you (as me) will see that JQuery Upload plugin is just too much complex and not so easy to run properly (I was able to see the preview, but then I couldn't upload the picture).
http://saravani.wordpress.com/2012/03/14/preview-of-an-image-before-it-is-uploaded/
It's simple and fast to code.
I put the code here just in case the source dies:
Script:
<!-- Assume jQuery is loaded -->
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#img_prev')
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
</script>
In the HTML:
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<input type='file' onchange="readURL(this);" />
<img id="img_prev" src="#" alt="your image" />
</body>
You can use the plugin jQuery File Upload which it's a full solution, but if you need something less robust, you can also try using FileReader directly, like this, so you can customize the functionality to whatever you need.
According to the documents image_cache is showing what you are uploading.
<%= f.hidden_field :image_cache %>
I have a requirement that I need to create a popup image gallery. Essentially the user clicks on an image folder and it pops up with the first image file full size and a group of scrollable thumbnails. The user would click on the thumbnail to display the image within the popup. I don't want to load the images until the user clicks on the image folder.
Is there a jquery library or commercial control that will already do this?
The problem is that I didn't know what to search for. A dynamic image gallery popup is called a lightbox. The query to use on google was jquery lightbox. Out of all the ones available, PrettyPhoto is the only one that had thumbnail images in the popup and an API to dynamically load the images during the popup.
Here are the ones available:
http://www.designyourway.net/blog/resources/30-efficient-jquery-lightbox-plugins/
http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts
Here is the only one that works as a dynamic popup with an API and thumbnails:
http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/
Here is the script needed to activate PrettyPhoto:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
Here is the script to define the photos:
<script type="text/javascript" charset="utf-8">
api_images = ['images/fullscreen/image1.jpg','images/fullscreen/image2.jpg','images/fullscreen/image3.jpg'];
api_titles = ['Title 1','Title 2','Title 3'];
api_descriptions = ['Description 1','Description 2','Description 3']
</script>
Here is what I used to click on a folder image with a content handler. The href of # is important:
<a href='#' onclick=" $.prettyPhoto.open(api_images,api_titles,api_descriptions);" title='#item.Folder.Title'>
<img style="max-height: 160px; max-width: 260px;" id='Img#(item.Folder.Id)' alt='#item.Folder.Title' title='#item.Folder.Title' src='#Url.Content("~/img.ashx")?mediaId=#item.Folder.Id' style='padding: 10px' />
</a>