I've created a new React application. As it stands, it just the template from Visual Studio; New Project -> Asp.Net Core -> React.
When the application runs, there is an element of dynamic content displayed on the screen. What I want to be able to do is to get some kind of HTML dump of this page, such that I could paste it into a static web application and have the same screen rendered.
I've had a look around, and have found a few tools, such as react-snapshot which appear to do what I want; however, it seems to be that you're in or out; that is, you either have it dynamically rendered or statically rendered. I just want a static dump of the HTML, and would like to leave the rendering as is.
For example, inside my Javascript, I have the following code:
const htmlSection = document.getElementById("MyHtml");
// Export Html Here
Is this kind of thing possible and, if so, how can it be achieved in code?
I did like this
const handleExport = () => {
const link = document.createElement("a");
// Create a blog object with the file content which you want to add to the file
const file = new Blob([document.getElementsByTagName('html')[0].innerHTML], { type: 'text/plain' });
// Add file content in the object URL
link.href = URL.createObjectURL(file);
// Add file name
link.download = "sample.html";
// Add click event to <a> tag to save file.
link.click();
URL.revokeObjectURL(link.href);
}
The HTML and module style can be exported, but the problem is that is javascript event can not be remained anymore.
You can use the fs module to read your index file something like this:
fs.readFileSync(path[, options])
Related
I'm just new to reactjs-spfx controls. I have a pnpjs control that lists all the pages and it's contents. I should be able to add edit and delete pages using that web part. I want to include in that component the functionality to add a new Web part to the page content when I'm editing it. How do you call that functionality from SharePoint to add new webpart? Please see below picture. Thanks.
I would recommend using pnpjs library for this, it wraps most basic tasks with a nice api. I am adding my own webpart to a page something like this, just to give you an idea:
See https://pnp.github.io/pnpjs/sp/clientside-pages/
const sp = SPFI(...)
// or get the existing page
const page = await sp.web.addClientsidePage(fileName, title);
const section = page.addSection();
const partDefs = await sp.web.getClientsideWebParts();
// find the web part we want to add by guid
const myPartDef = partDefs.find(c => areGuidsEqual(c.Id, MY_GUID));
const part = ClientsideWebpart.fromComponentDef(myPartDef);
part.setProperties({
someProp: someValue
});
section.addControl(part);
await page.save();
I use Excel data as a data source. I want to create slug dynamically and use Gatsby docs as an example. https://www.gatsbyjs.com/docs/tutorial/part-seven/
But this does not work, because I don't use Markdown files. I changed 'MarkdownRemark' to 'ExcelData'.
exports.onCreateNode = ({ node, getNode }) => {
if (node.internal.type === `ExcelData`) {
const fileNode = getNode(node.parent)
console.log(`\n`, fileNode.relativePath)
}
}
When You look at Gatsby docs, code print to the terminal two markdown files relative paths:
pages/sweet-pandas-eating-sweets.md
pages/pandas-and-bananas.md.
Mine code prints out same path multiple time, because there is only one Excel file.
I try to change the code and use data that is in an Excel file.
const fileNode = getNode(_9)
But this does not work and I get an errors like:
"gatsby-node.js" threw an error while running the onCreateNode lifecycle:
_9 is not defined
const fileNode = getNode(node._9)
Cannot read property 'relativePath' of undefined
Is it possible to change (node.parent) or not?
I assume you're using https://www.gatsbyjs.com/plugins/gatsby-transformer-excel/ already?
Gatsby has a new filesystem routing API that means creating routes like this is much easier called the File System Routing API — this links to the section on Collection Routes which automatically creates pages from every node in a collection without needing to create slugs manually in gatsby-node.js.
E.g. your type is ExcelData so you'd just need to create a collection route component at src/pages/{ExcelData.title}.js (assuming your spreadsheet has a field named title) to create pages for all your spreadsheet rows.
This works with any type and any field.
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 am trying to append the recorded video which is blob object into quill editor but the video which is appended in the editor is not playable.
Able to see only the blob object getting printed in the quill editor. If i try to open the contents in the browser it is working fine. Any suggestions?
enter image description here
well,according to this issue,
I think you maybe need to overwrite the video module's sanitize method to make it work,for image it can work like this:
var Image = Quill.import('formats/image')
Image.sanitize = function(url) {
return url
}
so as I guess, following things maybe useful:
var Video = Quill.import('formats/video')
Video.sanitize = function(url) {
return url
}
and you may need provide blob url to make it work
I am facing a slight issue while editing a file.
I am saving a file (image) with a certain name on ios using the code below.
But the problem is that when i replace the image stored in a file (eg temp.jpg) the app still picks up the previous image when i open the file. However the new image can be seen in the explorer.
If i restart the app the new image appears while opening the image.
var folder = Ti.Filesystem.getFile(Ti.Filesystem.externalStorageDirectory, 'DocImages');
// DocImages is a folder for files
// ImageVar contains the blob for the new image from camera or gallery
// docImgModel is the model class containing the name and image path of the image
if(imageVar !== null && imageVar !== undefined){
if (docImgModel.imagePath !== null && docImgModel.imagePath !== undefined){
tempFile = Ti.Filesystem.getFile(docImgModel.imagePath);
if (tempFile.exists()) {
tempFile.deleteFile(); // deleting already existing file
}}
// in case of changing the image stored in a file(the case in which i have a
// problem) the imgFile(below) is same as docImgModel.imagePath (above)
imgFile = Ti.Filesystem.getFile(Ti.Filesystem.externalStorageDirectory + 'DocImages/', filenameWithExtension); // creating a new file
// writing image to file
imgFile.write(imageVar);
Ti.API.info('new image saved');
}
}
I was wondering if titanium saves cache of the file already opened and is hence not able to show the new image.
If not, is there anything else i am doing wrong or something i could do to make it work.
I just want to show the new saved image. Is there any way to do it.
Thanks.
I haven't worked with opening files from the device, but I ran into a similar issue when trying to update data on my screen. If you are saying when you open the app and it loads the correct image comes up, then the code that you use to load the image appears correct and working. I assume that is the code you posted above. Even that appears to be a code fragment of a more complete file.
You didn't post any UI code, which is probably where your real problem is coming from. You have an object, a view of some sort I'm guessing, that is already rendered using the old image before you load the new image. So debugging, you might see the new image's data loaded in the code above, but the UI element hasn't been assigned or updated correctly.
As a test, I would suggest that you put some test code into your app that allows you to destroy your UI elements and recreate them, you will probably see the picture come up properly in that case.
According to this post: http://developer.appcelerator.com/question/31181/simple-image-refresh
Just assigning the image you loaded to the url of the image should update it. Your example code doesn't show the image object that you are attempting to update and how that communication is made from the code that is loading the image.
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');
// create tab group
var tabGroup = Titanium.UI.createTabGroup();
var image1 = 'image1.png';
var image2 = 'image2.png';
//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({
title:'Tab 1',
backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
icon:'KS_nav_views.png',
title:'Tab 1',
window:win1
});
var img = Titanium.UI.createImageView({
width:100,
height:100,
top:50,
left:110,
url:image1
});
win1.add(img);
var btn = Titanium.UI.createButton({
title:'load',
width:100,
height:35,
top:50,
left:0
});
function switchImage(){
if(img.url == image1){
img.url = image2;
} else {
img.url = image1;
}
}
btn.addEventListener('click',function(){
switchImage();
});
setInterval(switchImage,3000);
win1.add(btn);
//
// add tabs
//
tabGroup.addTab(tab1);
// open tab group
tabGroup.open();