I want to export data to PDF from a dynamic table, all the plugins use static tables, I mean by dynamic tables that they are created when I make request to export data and the user can't see these tables .
I need this because the way that the users see the data is different from the way that I want to print .
I'm using AngularJs in front end side and Nodejs in backend side to build my application
I tried to use this package :
https://www.npmjs.com/package/angular-save-html-to-pdf
this is an example from the documentation :
<button pdf-save-button="idOne" pdf-name="someone.pdf" class="btn">Hello
Someone</button>
<!-- below block will be saved as pdf -->
<div pdf-save-content="idOne" >
Hello Someone
</div>
the solution I want is to create and print the data in side the div dynamically when the button is pressed.
now what is the best practice to solve this problem ?
You can use Angular-UI-Grid Export future... It handles dynamic data and has some export futures..
Related
I am currently using Next.JS to create a static website with the main objective to have a very good SEO-optimized website.
Everything works fine and the website is correctly deployed with Vercel, but I have noticed that part of the content is not present directly in the HTML files.
For instance, I have a component that loops over an array of data, using the array map method, like this:
{imageTexts.map((image) => (
<ImageText
key={image.title + 'TitleImage'}
title={image.title}
description={image.description}
size={imagesSize}
image={image.image}
/>
))}
Once the website is deployed to Vercel, I search inside the HTML file for the information/strings contained in the array of data (imageTexts), but I can't find them. I guess Next.JS uses javascript to target some sort of div and then loops over its own JSON file to dynamically display content.
For me, this seems to kill a lot of the SEO advantage that static websites have over SPA. Is there any way I can have those strings directly inside my HTML files?
I am still not 100% sure this is caused by the map method, but I don't find any other explanations. Especially because other dynamically loaded components don't have the same problem. For example, this component string can be found on the HTML file, without a problem:
{title ? (
<Text
type="h2"
textAlign="center"
>
{title}
</Text>
) : null}
If you are mapping over ImageTexts on the server and that component renders HTML tags, then that HTML should be sent on the first-page load, and you could see it if you do CTRL+U or disable javascript.
Ok, I have just found that the reason. It has nothing to do with the map method. I was actually using the <Remark> component from library called react-remark. It seems it does not play well with Next.JS
Need to render ACF repeater in react. I am able to display ACF text Fields but not repeater fields. Need to find out if anyone has an example of how to map through a repeater field.
Repeater field group Is called Skills.
Im also new in this stuff, but I will try to help you.
So, the first thing that you need is to download and install ACF to REST API plugin so you can use ACF with Wordpress API. I assume, that you already have it, because as you said before - you can display text fields.
Once you can send data through Wordpress API, you need to preview of JSON sent by Wordpress (in this case), so you can display necessary data. Mine is called React Developer Tools and I installed it as Chrome extension.
Link to Chrome store
It should look like this:
As you can see, my component is called Home.js, yours may be called differently. Chose component that is fetching all the data that you need.
Now, you just need to use your repeater. It would be much easier if you showed us your code. I don't really know what kind of data you are calling through api, so I guess these are pages.
{ pages[0].acf.technologie_lista.map ( (field, index) => (
<div key={index} className="single-field">
{ field.nazwa_technologii }
</div>
) ) }
Let's break it down.
1 - My project contains two pages. I have chosen the first one, because only this one has needed ACF fields. technologie_lista is acf field name.
2 - You need to use map function to list all posts. You need to assign key to each element.
nazwa_technologii is just a repeater sub field name.
And that's all. I might make some rookie mistakes, but it work's for me. I hope that i helped. Cheers!
So, over the past week I have looked at loading multiple galleries at once. I have been working in MeteorJS with blaze templates but, the methods I am using aren't working.
Essentially, all my data comes from multiple MongoDB collections which are organized in one main collection. When the website starts, I want to access the list of current collections and for each collection display a gallery of photos.
(Main Photo Page)
{{#each collections}}
{{>gallery collectionName=collectionName}}
{{/each}}
(Gallery Template)
<Template name="gallery">
{{getPhotos}}
</Template>
I have tried using a reusable blaze template that is fed the data and then runs a helper to display the images. It works, but I am having trouble loading only one template/collection at a time. I want to load one first, when that is done, load the next etc.
I have also wondered about using ReactJS for this with MeteorJS on the backend, but before I start, I'm wondering about how easy is it to load components one by one vs templates?
Thanks for any ideas or help!
You could try merging the cursors in a helper, instead of inside the template. This will force the order you like and still be reactive since the find is in a reactive context (the helper).
(HTML)
<Template name="gallery">
{{#each getPhotos}}
<img src="{{this.src}}">
{{/each}}
</Template>
(js)
'getPhotos':function(){
let mergedCursor = [];
for (collectionObject in Template.currentData().collections){
//not clear how you are getting the collections
mergedCursor.concat(collectionObject.find().fetch());
}
return mergedCursor;
}
You could also import the collections in the same js file and merge them directly.
I'm new on React (I more at ease w/ jQuery or AngularJS). I have a special case and I don't find a good way to resolve it...
My app contains an area which is like a "document viewer". It loads an HTML content from the backend (via API, using Fetch) and inject it in the "viewer" component. The HTML content loaded looks like an "university report" (it's just a formatted text, only <span> and <p> with class="..." attributes, nothing more).
Ex : <p>Lorem ispum <span>some text</span> loreb bis <span>ipsum</span></p> ...
I load the content, and inject it this way in the render() of my component <Viewer> :
<div dangerouslySetInnerHTML={ getFreshlyLoadedHTML() } />
Easy, it works just fine !
But... Now, I want to inject some "interactive" components in the loaded HTML. For example, some button to give a feedback etc. The API must decide where to place the component between the words/nodes of the formatted text (HTML).
Ex :
<p> Lorem ispum <span>some text</span>
loreb bis <span>ipsum</span>
<MyFeedbackButton paragraph="1.3"/>
</p><p>Other Lorem Ipsum<p><span>...</span>
There, I'm stucked because I cannot use dangerouslySetInnerHTML if there are components inside the loaded HTML...
First attempt : I've tried modifying the API, and instead of sending the HTML in a string to the app, I send a custom JSON structure that represents almost the final JSX structure that I want. Then, in my react page, the render function only have to parse the JSON and build the JSX (here, a JsFiddle example if it's not clear : https://jsfiddle.net/damienfa/69z2wepo/34536/ )
It works, but I can't believe it's the good way...
I see a major problem : all the HTML node (span, p...) that I build from the render function are referenced by reactJs, is it really necessary ? Mostly, there are "dead" nodes (I mean, dom node that won't never changed, this is static formatted text).
Just take a look a all those "data-reactid" on nodes that never will be interactive...
What would be your advice on that case ?
What about my attempt with a JSON-structure sent by the API ?
Is there a way to say to react "do not reference that element" ?
Do you clearly see a better solution to my problem ?
Your current workflow is not very secure and subject to many potential errors and open doors, especially concerning code injection ...
The overload due to react tracking the nodes is not an issue, React could track 10 000 nodes and not have a problem (well actually on many of my apps React has more than 100 000 nodes to care about and it still rurns perfectly).
I see different solutions here:
If there are only 3 or 4 possibilities of dynamic components and order, you might have components like "templates" to which you would simple send text arguments. This is the safest and easiest option.
If it doesn't suit your use-case but the JSON file can contain only a limited set of components, the components should be located in your main app, and then rendered with custom props from the JSON. Actually given the structure of data you could consider using xml instead of json and build a xml tree that you would parse and render. Only components from your white list would be rendered and it would limit drastically the potentials security issues. If needs quite some work on the XML parser though.
If the JSON file can contain many many different and unpredictable components or if the behaviour of those components is largely dynamic and independant of your app, you might as well consider using an iframe, with its own JS and HTML, so that this part of the code is isolated from the rest.
Try using an inline anonymous function within the inner content from within React using JSX. It works! Just be careful about how you wire up the data so there isn't a route where a user can inject HTML from an input or text field.
<div className="html-navigation-button">{(() =>
{
const CreateMarkup = ( sNavItemName :string ) => {
return {__html: sNavItemName };
}
var sTextToAddHtmlTo = props.nextNavItem.name.toString();
sTextToAddHtmlTo = sTextToAddHtmlTo.replace( "/", "/<wbr>" );
return (
<div dangerouslySetInnerHTML={CreateMarkup( sTextToAddHtmlTo )} >
</div>
);
})()}
</div>
I didn't override the React internals of 'render()', but only used a React Component with props wiring to pass down data to it for rendering.
I added the hook for 'dangerouslySetInnerHTML' deep within the return content of the React Component so there would be no easy way to intercept and manipulate it.
As such, there is no 100% guarantee on safety, but that's where adding good security to web services, databases, and use of CORS and CORB would be helpful to lock down security risks.
I'm trying to figure out how to link an html picture element back to the database entry that was originally used to generate the picture link.
I am using Meteor:
- I have a database that contains photosets data from Flickr API
- In the HTML, I have a handlebar "each" script that iterates through each photoset in the database and then uses this info to generate the html for the photoset cover picture links.
- When the html renders, the photoset cover pictures are downloaded from Flickr and displayed to the screen.
I would like to be able to click on the photoset cover picture and then automatically generate the links to the pictures in the photoset. But I don't understand how to dynamically link the html picture elements back to their respective database entries that were originally used for generating the picture links. I need to be able to find the original database entries so that I can load the info needed for generation of subsequent links.
As a newb to all of this I'm not really sure where to start looking or what to try. I've wondered about creating an object with custom key pairs to 'memorise' the identity of each photoset picture. Is this the way to go, or is there an easier way that I am overlooking?
Thanks.
Say you have your pictures being put out this way:
Template.mytemplate.helpers({
picture:function() {
return pictures.find()
}
});
You can also do this instead, which is pretty much the same thing:
Template.mytemplate.picture = function() {
return pictures.find();
}
With the html
<template name="pictures">
{{#each picture}}
<img src="{{src}}" class="pictureselector"/>
{{/each}}
</template>
You can use events which can get data from that particular picture document/record
Template.mytemplate.events({
'click .pictureselector':function(event,template) {
console.log(this._id); //Should give you the `_id` of the picture that was clicked
}
});
this is the data context of the element that was clicked & generate the link you want using the data inside this.
Be careful if you use something with a callback inside the click like Meteor.call, you will have to relay the message down via var self = this otherwise the context of this would become the one of Meteor.call