I'm making a project in React Native that creates a table with some data, and I need to create a pdf with that table and be able to download/export that pdf.
Currently i'm using https://github.com/christopherdro/react-native-html-to-pdf, but its downloading to cache directory, even if i change to docs.
I was searching and some people say that u need to use file manager to download a pdf.
Can someone help me?
From docs, you have to specify "Documents" directory if you want it to be saved on Documents dir of ios/android.
async createPDF() {
let options = {
html: '<table><tr><th>Firstname</th><th>Lastname</th></tr></table>',
fileName: 'tableTest',
directory: 'Documents',
};
let file = await RNHTMLtoPDF.convert(options)
alert(file.filePath);
}
Since you are creating this table in your react native code, you don't need to download anything from anywhere. Cache directory is your phone's cache directory, so I can't understand from where you want to download the pdf.
Related
I'm not sure what to call the files, but the context is that I have a bunch of data that I would like to ship with my app. I need to find a way to store this data so that I can load it into the database. (Or better yet, just ship it with a prefilled db)
Here are the solutions that I've seen:
Storing the data in code as a json blob I can't do this because I have quite a lot of data, a few MB or so and I would like to be able to compress it.
Load a file from the public folder
I think this is a create-react-app specific API and I did not use that. But if there's a way to get a public or static folder to read arbitrary files from, that'll be great.
Read a file using react-native-fs
I'm not sure where to put the file in my application so that I can access it. This seems to give me an empty folder to write files to. I don't know where in my app directory I can put the files if I want it to be read by this.
I would also like to have these files compressed, and only loaded when I need them to be. I think using a require('path/to/file.json') loads the file every time I use the app.
How would I go about reading a file from my app?
I'm coding for android if that matters and the database I'm using is watermelondb.
You need to use react-native-asset to put files to your project and access them with require keyword.
Example for file with path ./assets/files/some-file.mp3:
Add or modify react-native.config.js
module.exports = {
project: {
ios: {},
android: {},
},
dependencies: {
},
assets: [
'./assets/files'
],
};
Run npx react-native-asset
Use the file:
const file = require('./assets/files/some-file.mp3')
I'm building an app with react-native, and I'm trying to use the react-native-fs module to list out a series of images located in the app folder. The images are located in a folder in the app project folder named 'data', so for example if I want to display one of the images, this works:
<Image source={require('./data/boo.png')} />
However when I try to use react-native-fs to list out all the files in that folder like so:
RNFS.readdir(RNFS.DocumentDirectoryPath+'/data')
.then((result) => {
console.log('GOT RESULT', result);
})
.catch((err) => {
console.log(err.message, err.code);
});
I get the error 'Folder does not exist'. Also when I remove the +'/data' the only result listed is a file by the name of 'ReactNativeDevBundle.js', with a path of '/data/user/0/com.awesomeproject/files/ReactNativeDevBundle.js'. Is this the expected behavior? If this is the expected behavior, and I am doing something wrong, how can I access the file folder I want from within the app? Side question, if I wanted to provide that Image tag with an absolute path, what would that look like.
First, are you creating the data folder in running time? or why do you think that's where the files are?
Second,
Also when I remove the +'/data' the only result listed is a file by
the name of 'ReactNativeDevBundle.js', with a path of
'/data/user/0/com.awesomeproject/files/ReactNativeDevBundle.js'. Is
this the expected behavior?
Yes, this is the expected behavior, RNFS.DocumentDirectoryPath goes directly to /data/user/0/com.awesomeproject/files/, this is where you should create the data folder if you want to keep using the same code you currently have
EDIT:
According to one of the contributors of the package: if your folder is within the javascript-space this package won't work.
If you're using android, you may need to put the files into the assets-folder within the android-folder. Then you should be able to use readDirAssets.
I recommend to read Differences between File Source
Excerpt:
Normal Files: These files are created by your app using fs, or fetch API, you can do any operation on these files.
Asset Files: Compiled into the app bundle so generally they're on
readonly mode
Follow up to this question:
apply downloaded CSS on windows 8 metroUI app
So, yes, Windows says "for security reasons, you cannot navigate to HTML you have downloaded to this location and you cannot run any executable or potentially executable code, such as script or CSS. It is intended for media such as images or videos and the like."
But I really, really want to use that css file from my local storage. Shouldn't I be able to use the execUnsafeLocalFunction method to bypass this restriction like this?:
MSApp.execUnsafeLocalFunction(function () {
el["href"] = "ms-appdata:///local/style.css"
});
It still throws "An app can’t load remote web content in the local context."
I also tried just reading the file with localFolder.getFileAsync and readText, but nothing seems to help. Is there really no way to work around this?
I think I found a way to get the CSS to load.
I tested the code below by adding a css file that sets the body background to red in the local storage folder.
The code reads the contents of the file, creates a style tag in the head and adds the content of the css file to the style.
var url = new Windows.Foundation.Uri(filename);
Windows.Storage.StorageFile.getFileFromApplicationUriAsync(url).then(function (file) {
Windows.Storage.FileIO.readTextAsync(file).then(function(text) {
var style = document.createElement("style");
style.innerText = text;
document.getElementsByTagName("head")[0].appendChild(style);
});
});
I have got a app with the getItemsAsync()-method returning a file-object for a picture chosen by the user with a file picker. Now I would like to get the folder-object of the folder which contains the image to make the user able to switch between the pictures in that folder without using the filepicker again.
The path is available upon return from the file picker. See:
Docs for StorageFile
You can in turn then call
Windows.Storage.StorageFolder.getFolderFromPathAsync(path)
.done( /* Your success and error handlers */ );
to get you the StorageFolder from that path.
Docs for GetFolderFromPathAsync()
if the app likely want to 'access' any file in the select folder, using FolderPicker is probably right. otherwise, the app will likely not have access to all files in the folder.
I'm trying to take and save a photo using a windows surface device.
I'm using the code below to take a photo and this work but I'd like to automatically create a directory on the device's local drive and save this photo there without any dialog prompts.
So the code I use to capture to photo is as follows:
CameraCaptureUI camera = new CameraCaptureUI();
StorageFile file = await camera.CaptureFileAsync(CameraCaptureUIMode.Photo);
if (file!=null)
{
using (IRandomAccessStream ras=await file.OpenAsync(FileAccessMode.Read))
{
BitmapImage source = new BitmapImage();
source.SetSource(ras);
imageBuildingPhoto.Source = source; // this is just an image control.
}
}
So after this I'd like to automatically save the photo to a new directory. e.g.
My Pictures\NewDirectory\Photo1.jpg
Anybody got any idea how I can do this?
This is a windows store application written using C#4.5 and XAML.
Thanks in advance
Use the CopyAsync method on the StorageFile object you get back (file). You can specify a directory and file name. If you need to create your own directory structure, you will need to enable access to the appropriate library in the Package Manifest then create it in code. You will then use the StorageFolder class and its CreateFolderAsync method to create folders.
http://aka.ms/30Days has some great resources for learning about scenarios like this. Might be worth checking out.
Your code will need to look to see if that folder exists and create it if it does not. Your app will need to declare the capability to access the user's Photos library in the app manifest, too.
To take a picture, your code is correct. I have a walkthrough in case you want to verify it against some other code: http://blog.jerrynixon.com/2012/10/walkthrough-capturing-photos-in-your.html
To interact with the file system, this can be tricky, but I have a longer write up on that if you want to reference it: http://blog.jerrynixon.com/2012/06/windows-8-how-to-read-files-in-winrt.html
The answer to your question is, yes you can. I have done it in my own apps. Now, it's just a matter of you implementing it in yours. You will find it to be pretty easy.