im trying to show a file using react-native-pdf
i pass the base 64 to to the component .
and it works for most pdfs. but for 1 of them it doesnt .
for the pdf that doesnt work on ios, it works on android.
i tried with and without caching.
tried separating the react native pdf and the react-native-blob-util , but nothing worked.
any help plz ?
setSource({uri:`data:application/pdf;base64,${documentBinary}`, cache:false})
<Pdf
style={styles.pdf}
source={source}
onLoadComplete={(numberOfPages, filePath)=>{
console.log(`number of pages: ${numberOfPages}`);
console.log(`cache path: ${filePath}`)
if(currentDocument != null){
cachedFilesMap.setItem(currentDocument.docNum, filePath)
}
}}
onPageChanged={(page,numberOfPages)=>{
console.log(`current page: ${page}`);
}}
onError={(error)=>{
console.log(error);
}}
onPressLink={(uri)=>{
console.log(`Link presse: ${uri}`)
}}
/>
Related
im trying to load pdf using react-native-pdf
it works for most of the pdfs, but for some it throws an error "load pdf failed"
i am getting the pdf in base64 state and pass it to react-native-pdf.
ive looked everywhere and cant find a fix.
any idea how to solve this ?
my code:
setSource({uri:`data:application/pdf;base64,${documentBinary}`, cache:true})
<Pdf
style={styles.pdf}
source={source}
onLoadComplete={(numberOfPages, filePath)=>{
console.log(`number of pages: ${numberOfPages}`);
console.log(`cache path: ${filePath}`)
if(currentDocument != null){
cachedFilesMap.setItem(currentDocument.docNum, filePath)
}
}}
onPageChanged={(page,numberOfPages)=>{
console.log(`current page: ${page}`);
}}
onError={(error)=>{
console.log(error);
}}
onPressLink={(uri)=>{
console.log(`Link presse: ${uri}`)
}}
/>
thnx
I am trying to render pdf using react-pdf the issue I am facing is that I am displaying image from the backend server using the URL. But it displays blank in the pdf. When I debugged further came to know that when I put breakpoint on the highlighted line the image gets displayed. May be it gets little time to load the image from remote URL ?
<Page size="A4" style={styles.page}>
{this.state.productsToBeExported.map((product) => {
const img = this.getImageSource(product);
//if breakpoint is added here then the images are displayed
return (
<View
key={product.productId}
style={styles.section}
>
<Image
style={{
width: imgWidth + "px",
border: "2pt solid #999898",
}}
src={img}
></Image>
</View>)
});
</Page>
//remote Image Url (Node server)
getImageSource(product) {
return `${URL}/${this.props.timestamp}/${product.productId}.jpg`;
}
PDF OUTPUT
Any help would be much appreciated.
Note: These images are generated in the backend on the fly. So I can't import them.
I ran into the same issue and it seems to be an issue with react-pdf. It seems to be showing files with the .jpeg extension only
I want to import files from collection.media that are not sound, image, or video. For example I'd like to import a JSON file.
I put the file _script.jquery-3.3.1.min.js and _data.json in my collection.media folder.
On Anki Desktop (Ubuntu), the following works:
<script src="_script.jquery-3.3.1.min.js"></script>
<script>
$.getJSON('_data.json', function(data) {
// succeeds on Anki Desktop, fails on AnkiDroid
});
</script>
(Note on Anki Desktop 2.0.47 I am using the JS Booster plugin).
On AnkiDroid, the situation is different. JQuery loads just fine in the script tag. However, $.getJSON fails to find the _data.json file.
I'd like to use _data.json on many cards/notes.
How can I import non-media, non-js files from collection.media in javascript, in a way that works both in Anki Desktop and AnkiDroid?
I have found some working answer for this.
To get character data in AnkiDroid card templates. (OFFLINE)
As we can access js and image file using this
<script src="some-js-file.js"></script>
<img src="some-image.png"></img>
To access json
I have tried same steps but getting CORS error so I used next steps.
<!-- It will give CORS error -->
<script src="我.json" type="application/json"></script>
With example,
To access 我.json file
Copy contents of 我.json into a javascript file 我.js, with any variable name,
var char_data = {"strokes":["M 350 571 Q 3....}
Add following tag to access that js file
<!-- Note : file type & name -->
<script src="我.js" type="text/javascript"></script>
Now also change code in _hanzi-writer.min.js
To change code, first beautify code using this https://beautifier.io, then make following change
a) Remove the link to load from internet
b) Change this 200 != r.status and replace/add this
JSON.parse(JSON.stringify(char_data))
( May be more good replacement can be done here )
....
....
// Note : char_data variable come from 我.js file
r.overrideMimeType && r.overrideMimeType("application/json"), r.open("GET", "", !0), r.onerror = function(t) {
....
....
4 === r.readyState && (200 != r.status ? i(JSON.parse(JSON.stringify(char_data))) : 0 !== r.status && n && n(r))
....
....
So final script will be like this
Front side of card
{{Pinyin}}
<div id="character-target-div"></div>
<script src= "我.js" type="text/javascript"></script>
<script>
var data = JSON.stringify(char_data);
console.log(data);
</script>
<script src="_hanzi-writer.min.js"></script>
<script>
var writer = HanziWriter.create('character-target-div', '我', {
width: 150,
height: 150,
showCharacter: false,
padding: 5
});
writer.quiz();
</script>
Above all the steps are for single file 我.js
To access other character repeat the same.
For similar issues view my code
https://github.com/infinyte7/Anki-xiehanzi
https://github.com/infinyte7/hanzi-writer-data-in-javascript
I assume this is related to how AnkiDroid handles collections.media files. If so, this might be a bug. A really hackish workaround could be to rename the file to .svg so that AnkiDroid treats it as an image and lets it through.
I'm having problem how can I able to generate links on twig view using the illuminate pagination. below is my codes.
Route:
$app->get('/', function ($request, $response) {
$data = Todo::paginate(5);
return $this->view->render($response, 'home.twig', [
'title' => 'Home',
'todolist' => $data,
]);
})->setName('homepage');
View:
{{todolist.links()}}
Error:
Call to a member function make() on null
btw I'm using Slim 3
Try this
Raw statement is to print the output as plain html (not text)
Refer to this link https://twig.sensiolabs.org/doc/2.x/filters/raw.html
{{todolist.links | raw}}
I tried on my slim 3 website and its works perfectly.
My Eloquent ver in the composer as below
"illuminate/database": "^5.2",
"illuminate/pagination": "~5.0"
If you're using Laravel pagination & Blade templates.
Try this in your blade file:
{{ $todolist->links() }}
Laravel docs: Displaying Pagination Results
I am trying to export kendo grid. It has around more than 27K records. when i try to export i get "Failed Network error" error in chrome, but this works fine on FF. I also tried to create kendo.ooxml.Workbook and tried to save it by Kendo.saveAs() but it also gives me same error. So i had to switch to server side.
Is there a limitation on Kendo.saveAs() method for file size ? It is strange that this scenario works fine on FireFox.
I'm used such workaround (saveAs is the FileSaver.js)
if (window.JSZip && window.JSZip.support && window.JSZip.support.blob) {
oldGenerate = window.JSZip.prototype.generate;
oldJSZip = window.JSZip;
window.JSZip.prototype.generate = function (options) {
blobForSave = oldGenerate.call(JSZipInstance, _.extend(
{},
options,
{
type: 'blob',
mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
}
));
return '';
};
window.JSZip = function () {
JSZipInstance = new oldJSZip();
return JSZipInstance;
};
workbook.toDataURL();
window.JSZip = oldJSZip;
window.JSZip.prototype.generate = oldGenerate;
saveAs(blobForSave, fileName);
} else {
kendo.saveAs({
dataURI: workbook.toDataURL(),
fileName: fileName
});
}
I have just resolved my problem with Kendo Export To PDF not working with Chrome. Using Network Traffic in Developer Tools I saw that there was a 404 error - DejaVuSans.ttf font not found. This did not stop Internet Explorer working - but it was the show stopper with Chrome. I moved the DejaVuSans font from the font folder to the Content folder (in with the calling css file), and changed the css code to (no path required now):
#font-face {
font-family: "DejaVu Sans";
src: url("DejaVuSans.ttf") format("truetype");
}
Perhaps not ideal to have a font in the Content folder when there is a font folder in the root directory, but my app works now.