i am trying for a pdf viewer using syncfusion with input as a blob sorage url but CORS error is being thrown when i use it. my core is as follows
blobService.getFileFromBlobByURI(objBlobStorageModel).then(function (result) {
$scope.ShowprofileSpinner = false;
$scope.serviceurl = $sce.trustAsResourceUrl(result.data);
$scope.serverActionSettings = {
load: 'LoadAction', fileUpload: 'FileUploadAction',
download: 'DownloadAction'
}
});
and the html for pdf is as follows
<div id="container" style="width: 100%; height: 680px" ej-pdfviewer e-serviceurl="serviceurl" e-serverActionSettings="serverActionSettings"></div>
Based on the provided details, we suspect that you are passing the PDF document data in the serviceURL. The serviceUrl property sets the Web Service Url not the PDF document data. Refer to the below UG to display the PDF document using Web Service.
https://help.syncfusion.com/angularjs/pdfviewer/getting-started#displaying-pdf-document-using-web-api
If your requirement is to load the PDF document from blob storage, kindly refer to the below KB,
https://www.syncfusion.com/kb/8737/how-to-load-a-pdf-document-from-url-into-pdf-viewer-from-client-side
You can also load the PDF documents during the control initialization using the documentPath API. Refer to the “Load the documents during control initialization” section in the below link,
https://help.syncfusion.com/angularjs/pdfviewer/getting-started#initialize-and-configure-the-control
Regards,
Ramya T
Related
I have a database document where there is links available for multiple images. I want to display this images in pdf.
I am using pdf: ^2.1.0 to edit the pdf file and flutter_pdfview: ^1.0.1 to view the pdf.
I am currently displaying images like this but this can only display images from the asset
final profileImage = pw.MemoryImage(
(await rootBundle.load('assets/images/image.png')).buffer.asUint8List(),
);
//Inside Widgets
pw.Image(profileImage)
I want to show images using a link but its not being possible.
This will help you
var response = await http.get(Uri.parse(imageUrl));
var data = response.bodyBytes;
Image(pdfW.MemoryImage(data),)
I have a PDF file stored in a directory within the application (assets/pdf/fileName.pdf). I need to display it on a new tab on a button click from a dialog.
Here is what I have, after looking at various answers:
In *.component.ts:
openPDF() {
this.myService.fetchPDF().subscribe(
res => {
let file = new window.Blob([res], {type: 'application/pdf'});
let fileURL = window.URL.createObjectURL(file);
window.open(fileURL, '_blank');
}
);
}
In *.service.ts:
fetchPDF(): any {
const path = 'assets/pdf/fileName.pdf';
return this.httpClient.get(PathResolver.resolveStatic(path),{responseType : 'blob'});
}
I already tried using responseType : 'arraybuffer', but it didn't work out either.
Here are the threads I have looked at:
How to Display blob (.pdf) in an AngularJS app
Angular 2 download PDF from API and Display it in View
PDF Blob - Pop up window not showing content
Failed to load PDF document - Angular JS - BLOB
I am not sure why are you using httpClient. The outcome that you want could be simply achieved by the following code
In *.service.ts:
fetchPDF(): any {
const path = 'assets/pdf/fileName.pdf'
return path;
}
In *.component.ts:
openPDF() {
window.open(this.myService.fetchPDF(), '_blank');
}
You will either need to use the html embed tag (most likely also using a safe pipe), a PDF viewer (like Google PDF Viewer) or you can open the PDF in a new tab (this is the more common approach I see). It depends on your preference.
Succesfully i have made to Upload files into firebase storage, but now i want to display all files in table and to have option to download each file.I've read the documentation in firebase but it won't work.When i click the button which function is to get all files and the i want to visualize them in table which users can see:
Show file function:
showFileUrl(){
storageRef.child('UploadedFiles/').listAll().then(function(res) {
res.items.forEach(function(folderRef) {
console.log("folderRef",folderRef.toString());
var blob = null;
var xhr = new XMLHttpRequest();
xhr.open("GET", "downloadURL");
xhr.responseType = "blob";
xhr.onload = function()
{
blob = xhr.response;//xhr.response is now a blob object
console.log(blob);
}
xhr.send();
});
}).catch(function(error) {
});
}
This is log of the network which i found when debugging.What i need to do to get all data and visualize it in table and to hava a download button and when is pressed to download the file
Network log:
Storage in firebase:
Blob object of the files:
Your code gets a list of all the files, but it doesn't actually to anything to read the data for each file.
When using the Web client SDK, the only way to get the data for a file is through a download URL as shown here. So you'll need to:
Loop through all the files you get back from listAll() (you're already doing this).
Call `getDownloadURL as shown here, to get a download URL for each file.
Then use another library/function (such as fetch()/XMLHTTPRequest) to read the data for each file.
Alternatively, if your files are images, you can stuff the download URL in an img tag as the preview.
I am opening a webpage in the cefsharp browser and trying to send a set of JSON data to my website's .aspx page along with query string. While the query string is not an issue but sending the JSON data to the same URL is what I am trying to fix. Earlier I was using Window's native WebBrowser control's Navigate method where I was passing the URL along with query string as well as a byte array. But, I don't find any such method to post the data. Various discussion and posts regarding the same don't have a clear example. Can you provide a sample code/example to show how to achieve that? Here is the code I've been using:
ChromiumWebBrowser browser = new ChromiumWebBrowser();
browser.Address = "https://webhook.site";
browser.Width = System.Windows.SystemParameters.PrimaryScreenWidth;
browser.Height = System.Windows.SystemParameters.PrimaryScreenHeight;
browser.RequestHandler = this;
browser.IsBrowserInitializedChanged += (sender, args) =>
{
if (browser.IsBrowserInitialized)
{
browser.LoadUrlWithPostData("https://webhook.site/#/cba9d04b-01ff-40ef-b223-0917d127ecbe/6ce82e34-28df-4900-88ef-c932a446c6b0/1", Encoding.UTF8.GetBytes("test=123&data=456"));
}
};
I come here because I use the CameraPreview class from ionic-native in my ionic 2 project to take a picture, and I actually struggle with the path of the picture which is something like : assets-library://asset/asset.JPG?id=...
That type of URL is obviously impossible to render in the DOM, and I want to know how to convert it into a supported URL for the img or ion-img tag.
I tried to convert it using File.readAsDataURL() as it is suggested in the following links, but the promise return an empty string.
https://www.npmjs.com/package/cordova-camera-preview
http://ionicframework.com/docs/v2/native/file/
You can load it via http as a Blob and then set that as the src for an img.
Example below:
this.http.get(fileURI, new RequestOptions({responseType:ResponseContentType.Blob}))
.subscribe(
data => {
var blob = data.blob();
this.previewImage = this.sanitize(URL.createObjectURL(blob));
this.cd.detectChanges();
});
Make note of the sanitize function. This is required to bypass default browser security - see https://stackoverflow.com/a/37432961/3446442
In this example the img tag is bound to the previewImage variable:
<div [style.width.px]="cameraSize" [style.height.px]="cameraSize">
<img id="preview" [src]="previewImage">
</div>