We would like to distribute a set of PDF files within our application. Originally we were opening these with a React PDF viewer however the users really need to be able to save these files to their computer so they can read/annotate/print these in their own time etc.
We are using Create React App within Electron - do you have any suggestions?
Thanks!
Managed to get this working using the following method:
PDFLink= (e)=> { // Open PDF with `shell` method
console.log("Clicked PDF: ");
var attrs=e.currentTarget.attributes;
const shell = window.require('electron').shell;
const remote = window.require('electron').remote;
const appPath = remote.app.getAppPath();
console.log('appPath: ', appPath);
for (var a=0;a<attrs.length;a++)
{
console.log(attrs[a].name+"="+attrs[a].value);
switch (attrs[a].name)
{
case 'data-pdf':
//console.log(app.getAppPath());
shell.openItem(appPath+'\\public\\pages\\test1.pdf');
break;
default:
break;
}
}
}
If the PDFs are shipped with your app, you could just use the shell module to open them: shell.openItem(fullPath).
shell
Manage files and URLs using their default applications.
shell.openItem(fullPath)
Returns Boolean - Whether the item was successfully opened
Open the given file in the desktop's default manner.
Related
I'm using Visual Studio 2022 net 6.0 for create a react project.
I used the ASP.Net Core with React.JS template
Visual Studo 2022 Template
I'm following this tutorial for create a new react application:
https://youtu.be/uii_TmfCjiM
My problem is the part Minute 22:00 of the video.
Where he add a validation in react for add a static file (And PNG image) to be specific.
In the project folder, there is an folder images, and I want to add one of these to a react component.
The idea is to load the image dynamically, using a call to the SQL DB to create the full path
My only difference between my current work space and the video, is I don't have separate projects for the react app and Visual studio Web API.
I used instead the "ASP.Net Core with React.JS" template I mention before.
I follow the tutorial and I add this code to the program.cs file:
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new PhysicalFileProvider(Path.Combine(builder.Environment.ContentRootPath, "Images")),
RequestPath = "/Images"
});
And even did a extra config as well and in the setupProxy.js file, I add the images path to the context:
const context = [
"/api/Participants",
"/api/Questions",
"/Images"
];
module.exports = function(app) {
const appProxy = createProxyMiddleware(context, {
target: target,
secure: false,
headers: {
Connection: 'Keep-Alive'
}
});
app.use(appProxy);
};
But I'm still having issues when I try to load the image, this is how it looks like:
Web Application
And in the network tab in the DevTools I have this as an Status:
Dev Tools network tab
Any ideas of what could be the problem.
Or what step I'm missing
Best Regards
All after make my search this is the solution I found.
Using the documentation for the http-proxy-middleware, I found in this link:
https://www.npmjs.com/package/http-proxy-middleware
I found the answer for configure the proxy correctly for allow static files.
the program.cs file in .net 6 was correct and these were necessary for allow access the image folder:
app.UseStaticFiles(new StaticFileOptions
{
FileProvider = new
PhysicalFileProvider(
Path.Combine(builder.Environment.ContentRootPath,
"Images")),
RequestPath = "/Images"
});
The lines I had to modify in the proxy was the context values.
Noted I had to add the wild card "**" for allow all strings in the context, because you cannot combine string and wildcards. At the end the setupProxy.js :
const context =["/api/Participants/**","/api/Questions/**","/images/**"];
module.exports = function(app) {
const appProxy = createProxyMiddleware(context,{
target: target,secure: false,headers: {
Connection: 'Keep-Alive'
}
});
app.use(appProxy);
};
As you can notice the wild card "*" for all the string path in the context array. Beside you can use this kind of wild card for allow an especific extension, like .png:
"/images/* *.png"
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.
I want to implement File Upload function like Dropbox. I use Appcelerator. This function can upload file from Acrobat, iBook, Work, Excel, Drive etc. And make in on iOS.
I have researched on Appcelerator but could not find any solution for this.
I dont know how to access to local storage on iOS or working with another app by Appcelerator.
Can you give me any suggestion about this problem
Thank you very much
You should register CFBundleDocumentTypes in your tiapp.xml ios element, which works the same as modifying the Info.plist in Xcode would for an Obj-C or Swift app. Once you have that completed, you can listen for the resume event in your app, and look at Ti.App.getArguments() to see if your app was launched by choosing "Open In" from another app. You can also look at the folder Inbox inside of Ti.Filesystem.applicationDataDirectory to see if there are any new files in there -- that's where iOS will place them when sharing them to your app.
Your code for handling the document could look like this (in your resume handler):
var cmd = Ti.App.getArguments(),
inboxFiles = Ti.Filesystem.getFile(Ti.Filesystem.applicationDataDirectory, 'Inbox').getDirectoryListing() || [];
if (inboxFiles.length > 0) {
inboxFiles = inboxFiles.sort(byLastCreated).map(toTiFile);
if (!cmd.url) {
cmd.url = inboxFiles[0].getNativePath();
}
if (inboxFiles.length > 1) {
for (var i = inboxFiles.length - 1; i >= 1; i--) {
inboxFiles[i].deleteFile();
}
}
}
if (cmd && cmd.url && cmd.url.indexOf('file://') === 0) {
// TODO: Do something interesting with cmd.url.
}
I am creating a simple node web kit app. I have form with input type, on submitting the form i want to save this browsed file into temp folder. How to do this with node web kit.
A sample code will be more help to my studying.
When working with NW you should think in a desktop application workflow, you would not need a server side like creating a http server to receive files, instead you could perform file operations from the 'client' side,
To select the file you could use File dialogs this code explain how to select it and require the fs module to work with it:
<script>
// requiring the fs module
var fs = require('fs');
function chooseFile(name) {
var chooser = document.querySelector(name);
chooser.addEventListener("change", function(evt) {
// this will print the selected file
console.log(this.value);
// from here you could use the fs module required above to do whatever you need with the file, read it or write it
}, false);
chooser.click();
}
chooseFile('#fileDialog');
</script>
So I'm using Cordova + Sencha Touch for an app and Antair's SQLitePlugin (https://github.com/Antair/Cordova-SQLitePlugin) to import and use an SQLite database in it.
I managed to import my (kinda big) prepopulated database using Antair's importPrepopulatedDatabase ( window.sqlitePlugin.importPrepopulatedDatabase({file:"mydb.db",importIfExists:false}) ) method and it works just fine. The thing is I noticed the app is using twice the size it really needs as it keeps the file after importing it.
I checked and the app works just fine if I delete the file from /cordova/www/db and build again, it keeps the actual db in the app's filesystem I guess, but I can't find a way to programmatically delete that file after it has been imported.
I looked around and found cordova file plugin (https://github.com/apache/cordova-plugin-file/blob/master/doc/index.md), but from what I saw from the docs it only grants read permissions on the www folder, so that won't do it.
Does anyone have any workaround for this? I could really use that extra space.
By using cordova file plugin api you can do this,
please refer this :
deleteFile: function(fileName) {
var that = this;
if (!fileName) {
console.error("No fileName specified. File could not be deleted.");
return false;
}
window.requestFileSystem(LocalFileSystem.TEMPORARY, 0, function(fileSystem){ // this returns the tmp folder
// File found
fileSystem.root.getFile(fileName, {create: false}, function(fileEntry){
fileEntry.remove(function(success){
console.log(success);
}, function(error){
console.error("deletion failed: " + error);
});
}, that.get('fail'));
}, this.get('fail'));
}