In my Xamarin Forms app, I want to be able to display documents (.pdf, .docx, .ppt) that I have as a byte[]. I only need it to work on iOS devices. This works for me:
var url = "https://www.example.com/doc.pdf"
//var url = "https://www.example.com/doc.docx" or this
//var url = "https://www.example.com/doc.ppt" or this
myWebView.Source = url
And I can see the document in my WebView. But I need to be able to display it from a byte array. Something like this:
var pdfByteArray = GetPdfFromMemory();
myWebView.Source = pdfByteArray;
I don't want to use this as it seems it would only work for PDFs.
Related
I'm working on a project that all pdf files are encrypted on Web Server.
With XMLHttpRequest I get content of the encrypted pdf file. Then with JavaScript tools I decrypt the file. After all assign the content of file to a javascript variable as decrypted_file. All this is done at client side.
Here is what i want to do;
pdf.js renders and views pdf file that is located on web server or the same directory base.
How could I handle pdf.js to get content from javascript variable not url as "http//yourdomain.com/first-test.pdf or file as "first-test.pdf"?
Any answers are welcome, thank you.
Assuming that you are using the viewer.html of PDF.js, opening a PDF file from data is as easy as calling PDFViewerApplication.open with the right parameters.
Example: Typed arrays (Uint8Array / ArrayBuffer / ..)
// in viewer.html
var data = new Uint8Array( /* ... data ... */ );
PDFViewerApplication.open(data);
Example: Blob / File objects
// in viewer.html
var data = new Blob([ '%PDF....'] , {type: 'application/pdf'});
var url = URL.createObjectURL(data);
PDFViewerApplication.open(url);
Example: data URL (if supported by browser)
var url = 'data:application/pdf;base64,....';
PDFViewerApplication.open(url);
Example: data URL (any browser)
This consists of two steps: Decoding the base64 data-URL, and then converting the binary string to an Uint8Array.
var url = 'data:application/pdf;base64,....';
var data = url.split(';base64,')[1];
// Decode base64
var binaryString = atob(data);
// Convert binary string to Uint8Array
data = new Uint8Array(binaryString.length);
for (var i = 0, ii = binaryString.length; i < ii; ++i) {
data[i] = binaryString.charCodeAt(i);
}
PDFViewerApplication.open(data);
Example: Using PDF.js in a frame
<iframe src="viewer.html" id="pdfjsframe"></iframe>
<script>
var pdfjsframe = document.getElementById('pdfjsframe');
// At the very least, wait until the frame is ready, e.g via onload.
pdfjsframe.onload = function() {
var data = ... data here or elsewhere ... ;
pdfjsframe.contentWindow.PDFViewerApplication.open(data);
};
</script>
I have a blob which I've stored in Azure blob storage (using the development emulator).
Its all saved and I can see it in the server explorer in the blob store (file.mp3 if that matters).
I'm then linking to it in my site but when I click the link I'm getting a 206 (partial content) back (and obviously no file). If I right click save as everything is happy and the file downloads.
I'm sure this is something pretty noobish that I'm missing but I cant see it.
That is because, browser does not download media file as whole, browser requests Range for which Blob Storage correctly responds with one byte and with headers. This is called HTTP streaming, where parts of file will be downloaded in ranges and will be played progressively. In this form of streaming you can skip parts of file and go to end to play the end part of media without downloading whole file.
Imagine you are watching a big movie, and that movie is of 100 MB. And you want to watch last One minute of it, you can move player's tracker forward on timeline and browser will only download last few megabytes as per the timeline structure in Media file. Usually MP4 & similar media containers support file byte position tracking.
Browsers & most media players try to stream the media file if possible.
You can try following download attribute,
Reference: http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download
download me
You can try following code, from this answer, Reference: Chrome extension: How to save a file on disk
var url = window.webkitURL || window.URL || window.mozURL || window.msURL;
var a = document.createElement('a');
a.download = 'MyHangouts-MomentCapture.jpg';
a.href = url.createObjectURL(dataURIToBlob(data.active, 'jpg'));
a.textContent = 'Click here to download!';
a.dataset.downloadurl = ['jpg', a.download, a.href].join(':');
/**
* Converts the Data Image URI to a Blob.
*
* #param {string} dataURI base64 data image URI.
* #param {string} mimetype the image mimetype.
*/
var dataURIToBlob = function(dataURI, mimetype) {
var BASE64_MARKER = ';base64,';
var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var base64 = dataURI.substring(base64Index);
var raw = window.atob(base64);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
var bb = new this.BlobBuilder();
bb.append(uInt8Array.buffer);
return bb.getBlob(mimetype);
};
I'm developing an application that retrieves an image of "Bing Maps" with [Bing Api] since my webService.
My problem is the rendering of the image.
If I set my zoom greater than 11,or if I set a size too big, the result of recover my image is like "cut" into several loading and gives the impression that the image is not entirely downloaded.
Example picture below...
Have you any idea why the image looks like its back?
Here is my code used in my webService.
//call function
GetImageMap(46,6,800,800,17);
//Get Bing map Image from the web
public string GetImageMap(double latitude,double longitude,int mapSizeHeight, int mapSizeWidth, int zoomLevel)
{
string key = "asoidfz9aos78fa9w3hf9w3fh9hf7ha9wfw37fhblablablablablabla";
MapUriRequest mapUriRequest = new MapUriRequest();
// Set credentials using a valid Bing Maps key
mapUriRequest.Credentials = new ImageryService.Credentials();
mapUriRequest.Credentials.ApplicationId = key;
// Set the location of the requested image
mapUriRequest.Center = new ImageryService.Location();
mapUriRequest.Center.Latitude = latitude;
mapUriRequest.Center.Longitude = longitude;
// Set the map style and zoom level
MapUriOptions mapUriOptions = new MapUriOptions();
mapUriOptions.Style = MapStyle.Aerial;
mapUriOptions.ZoomLevel = zoomLevel;
mapUriOptions.PreventIconCollision = true;
// Set the size of the requested image in pixels
mapUriOptions.ImageSize = new ImageryService.SizeOfint();
mapUriOptions.ImageSize.Height = mapSizeHeight;
mapUriOptions.ImageSize.Width = mapSizeWidth;
mapUriRequest.Options = mapUriOptions;
//Make the request and return the URI
ImageryServiceClient imageryService = new ImageryServiceClient();
MapUriResponse mapUriResponse = imageryService.GetMapUri(mapUriRequest);
return mapUriResponse.Uri;
}
// ### END Function getImageMap
And the url query:
http://api.tiles.virtualearth.net/api/GetMap.ashx?c=46,6&dcl=1&w=800&h=800&b=a,mkt.en-US&z=17&token={token}
Result image.. :
It seems to be related to the aerial imagery and it's not technically related.
I will report it to the appropriate team.
By the way, you should use the REST Imagery API which is the official way to use the imagery from Bing, see the MSDN:
http://msdn.microsoft.com/en-us/library/ff701724.aspx
Here is a sample URL based on your example:
http://dev.virtualearth.net/REST/v1/Imagery/Map/Aerial/46,6/17?mapSize=800,800&key=YOURKEY
I mean, when a user chooses the video file from their system, have the web-page already show them the files they want to upload.
I'm already using image file to preview using FileAPI JS. The same I want to do with FileAPI JS for video file.
(So, It must be work within my client side)
Thanks & answers are appreciated :)
You can either use FileReader or createObjectURL. They'll both get the job done, but FileReader has slightly broader support in browsers.
createObjectURL will run synchronously and return a Blob URL, a short string referencing the file in memory. and you can free it up immediately after you're done using it.
FileReader will run asynchronously, requiring a callback, providing a Data URI, a much longer string representing the whole file. This can be very big and will be freed from memory in Javascript garbage collection.
Here's an example that first tries createObjectURL and falls back to FileReader. (Please provide your own error checking, etc.)
var video = document.getElementById('video'),
input = document.getElementById('input');
input.addEventListener('change', function (evt) {
var reader = new window.FileReader(),
file = evt.target.files[0],
url;
reader = window.URL || window.webKitURL;
if (reader && reader.createObjectURL) {
url = reader.createObjectURL(file);
video.src = url;
reader.revokeObjectURL(url); //free up memory
return;
}
if (!window.FileReader) {
console.log('Sorry, not so much');
return;
}
reader = new window.FileReader();
reader.onload = function(evt) {
video.src = evt.target.result;
};
reader.readAsDataURL(file);
}, false);
Working example here: http://jsbin.com/isodes/1/edit
Mozilla has a more detailed article with instructions on how to upload once you've got your file.
IE10 supports both, but IE9 supports neither, so you'll have to fall back to a regular form upload without a preview.
How do I determine the URL of the current page from within Flex?
Let's be clear here.
1. If you want the URL of the loaded SWF file, then use one of these.
Inside your application:
this.url;
From anywhere else:
Application.application.url; // Flex 3
FlexGlobals.topLevelApplication.url; // Flex 4
If you are loading your SWF inside another SWF, then keep in mind that the code above will give different values. this.url will return the url of your SWF, where as Application.application.url will give the url of the parent/root SWF.
2. If you want to know the URL that is in the browser address bar, then use one of these.
BrowserManager method(Make sure you have the History.js included in your wrapper html for this to work):
var browser:IBrowserManager = BrowserManager.getInstance();
browser.init();
var browserUrl:String = browser.url; // full url in the browser
var baseUrl:String = browser.base; // the portion of the url before the "#"
var fragment:String = browser.fragment; // the portion of the url after the "#"
JavaScript method:
var browserUrl:String = ExternalInterface.call("eval", "window.location.href");
If you are parsing the url for parameters, don't forget about this useful function:
// parses a query string like "key=value&another=true" into an object
var params:Object = URLUtil.stringToObject(browserURL, "&");
From the Application:
var myUrl:String = Application.application.url;
I searched and came up with this url. I've honestly never used Flex, but it looks like the important part of that document is this:
private function showURLDetails(e:BrowserChangeEvent):void {
var url:String = browserManager.url;
baseURL = browserManager.base;
fragment = browserManager.fragment;
previousURL = e.lastURL;
fullURL = mx.utils.URLUtil.getFullURL(url, url);
port = mx.utils.URLUtil.getPort(url);
protocol = mx.utils.URLUtil.getProtocol(url);
serverName = mx.utils.URLUtil.getServerName(url);
isSecure = mx.utils.URLUtil.isHttpsURL(url);
}
Either way, good luck! :)
Using ExternalInterface (flash.external.ExternalInterface), you can execute Javascript in the browser.
Knowing this, you can call
ExternalInterface.call("window.location.href.toString");
to get the current URL (note that this will be the page url and not the .swf url).
hth
Koen
From the Application, use: this.loaderInfo.loaderURL
to break it apart and use parts of it do:
var splitURL:Array = this.loaderInfo.loaderURL.split('/');
var baseURL:String = "http://"+splitURL[2];
I tried the e:BrowserChangeEvent version and inside my class it didnt or wasnt the appropriate moment for this event to work so in short it didn't work !
Using Application.application.loaderInfo.loaderURL is my preferred solution.
ExternalInterface.call("window.location.href.toString");