type here
Hi
I want to convert html to pdf in angular using jspdf and send to nodejs server
Can anyone help me?
Or give me advice please
I have this code saved in the browser and I want to send it to the nodejs server
public openPDF(): void {
let DATA: any = document.getElementById('content');
html2canvas(DATA).then((canvas) => {
let fileWidth = 208;
let fileHeight = (canvas.height * fileWidth) / canvas.width;
const FILEURI = canvas.toDataURL('image/png');
let PDF = new jsPDF('p', 'mm', 'a4');
let position = 0;
PDF.addImage(FILEURI, 'PNG', 0, position, fileWidth, fileHeight);
PDF.save();
});
}
Related
I have the response json from the backend (spring boot):
private byte[] archivoExcel;
private String extension;
private String mime;
What I need in angular is to get this byte [] and export it to excel, for this my answer json in angular is:
export class RespuestaExportar {
archivoExcel: ArrayBuffer;
extension: string;
mime: string;
}
and in my component.ts file I have:
this.reversionesService.getReversionesExportarSeguimiento(this.solicitud).subscribe(res => { this.respuestaExportar=res; let file = new Blob([this.respuestaExportar.archivoExcel], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
var fileURL = URL.createObjectURL(file); window.open(fileURL); }
When I run the 'export' button, it consumes correctly, and it downloads the excel, but this file is damaged. Do I need one more step to solve it? or there is another alternative, since I need to get this byte [] from the backEnd.
I think you can guide yourself from this service that I perform for my backend (SpringBoot) I send a responseObject as json
ObjectResponse response = new ObjectResponse();
ByteArrayInputStream in = getExcel();
byte[] array = new byte[in.available()];
in.read(array);
httpStatus = HttpStatus.OK;
response.setResultado(array);
return new ResponseEntity<>(response, httpStatus);
and I get a Json response with the structure that sent the data is that when serializing it, the response.getResult arrives in base64, that is, already transformed to the client that receives it.
So in my frontend (Angular) I proceed to transform it into a Blob and be able to work the file.
this.subcriber = this.reporteService.generarExcel (). subscribe ((b64Data: any) => {
const byteCharacters = atob (b64Data.result);
const byteNumbers = new Array (byteCharacters.length);
for (let i = 0; i <byteCharacters.length; i ++) {
byteNumbers [i] = byteCharacters.charCodeAt (i);
}
const byteArray = new Uint8Array (byteNumbers);
let blob = new Blob ([byteArray], {type: 'application / vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
const url = window.URL.createObjectURL (blob);
const anchor = document.createElement ('a');
anchor.download = `file.xlsx`;
anchor.href = url;
anchor.click ();
messageService = {
state: false,
messages: null
};
}, (err) => {
this.subcriber.unsubscribe ();
})
I hope it helps you
I work on project and try to implement signature pad on pdf file.
I make a signature with angular2-signaturepad package and view the pdf file with ng2-pdf-viewer.
now i'm looking for a way
to add the signature to Existing pdf file.
What is the best way?
Try this if it helps using Html2canvas in anglar. you could send your html content to pdf and view it.
Example function
htmlToPdf() {
var data = document.getElementById('html2pdf'); // You can pass the id here for your signature
html2canvas(data).then(canvas => {
var imgWidth = 208;
var pageHeight = 100;
var imgHeight = canvas.height * imgWidth / canvas.width;
var heightLeft = imgHeight;
const contentDataURL = canvas.toDataURL('image/png')
let pdf = new jspdf('p', 'mm', 'a4'); // A4 size page of PDF
var position = 0;
pdf.addImage(contentDataURL, 'PNG', 3, position, imgWidth, imgHeight);
pdf.fromHTML()
pdf.save(this.data+'.pdf'); // Generated PDF
});
}
Trying to send a file message to bale.ai bot. Upload seems working correctly but when it reach send function the connection will be reseted. What is the problem?
let ddd = fs.readFileSync(__dirname + '/a.html')
bot.UploadFile(ddd,'file').then(response => {
let fileId = response.fileId
let fileAccessHash = response.accessHash
let fileŁ°Version = response.version
const stats = fs.statSync(__dirname + '/a.html')
var file = new SDK.FileMessage(fileId, fileAccessHash, 'telename', stats.size, 'text/html', 'see')
bot.send(file, responder.peer)
fileId and accessHash must be string, replace this line
var file = new SDK.FileMessage(fileId.toString(), fileAccessHash.toString(), 'telename', stats.size, 'text/html', 'see')
with yours.
I need to update orientation tag(EXIF data) for the uploaded image. I am using "PIEXIF" for this. I am not using express but swagger. The code I've written is:
//Get the uploaded buffer
var _originalBuffer = req.swagger.params.uploadedFile.value.buffer;
let Duplex = require('stream').Duplex;
//Create stream from buffer. This stream is required later to send to cloud.
let _uploadedFileStream = new Duplex();
_uploadedFileStream.push(_originalBuffer);
_uploadedFileStream.push(null);
//Create base 64 string so that "PIEXIF" can read exif data from it.
const jpegData = "data:image/jpeg;base64, " + createStringFromBuffer(_originalBuffer, 'base64');
//Read exif data.
var _exifData = piexif.load(jpegData);
//Create a copy of exif data. Will be used to create a new image with updated orientation tag.
var _exifDataCopied = {};
for (var key in _exifData) {
_exifDataCopied[key] = _exifData[key];
}
//Update orientation tag.
if (_exifDataCopied["0th"][piexif.ImageIFD.Orientation])
_exifDataCopied["0th"][piexif.ImageIFD.Orientation] = 1;
//Example taken from https://www.npmjs.com/package/piexifjs
//From here onwards, there seems to be an issue.
var exifbytes = piexif.dump(_exifDataCopied);
var newData = piexif.insert(exifbytes, createStringFromBuffer(_originalBuffer, 'binary'));
var newJpeg = new Buffer(newData);
//Create a new stream and save it as image back.
let _updatedFileStream = new Duplex();
_updatedFileStream.push(newJpeg);
_updatedFileStream.push(null);
var fs = require('fs');
var writeStream = fs.createWriteStream("./uploads/" + "Whatever.jpg")
The issue is there is no error thrown by the code. The image is also getting saved in the directory but it is corrupted. I can not preview it. Since, the code does not breaks anywhere, I am confused what could be the issue? The function to convert buffer to string with different encoding(since I need it a lot) is:
var createStringFromBuffer = function(_buffer, _encoding) {
return Buffer.from(_buffer).toString(_encoding);
}
Can someone point out where I am mistaking? I am using the example given Here
I am uploading an attachment in BOT emulator, after uploading an attachment I am converting it to base64, to pass it to our service.
I pick this attachment from path D:\Images\MobileRequest.PNG, but after uploading it to BOT app it shows the path of attachment as http://127.0.0.1:44185/v3/attachments/ne7djbemc9f40bifi/views/original/MobileRequest.PNG, as the image is not available on this path, So while converting the image to base64, it throws an error as "URI formats are not supported.".
How to get actual physical path i.e "D:\Images\MobileRequest.PNG" in BOT app.
Below is code from my BOT app
var dialog = new PromptDialog.PromptAttachment("Please attach screenshot ", "Sorry, I didn't get the attachment. Try again please.", 2);
context.Call(dialog, afterUpload);
private async Task afterUpload(IDialogContext context, IAwaitable<IEnumerable<Attachment>> result)
{
IEnumerable<Attachment> attach = await result;
string filePath = attach.FirstOrDefault().ContentUrl + "/" + attach.FirstOrDefault().Name;
context.UserData.SetValue("filePath", filePath);
}
string filePath = string.Empty;
context.UserData.TryGetValue("filePath", out filePath);
using (System.Drawing.Image image = System.Drawing.Image.FromFile(filePath))
{
using (MemoryStream m = new MemoryStream())
{
image.Save(m, image.RawFormat);
byte[] imageBytes = m.ToArray();
attach1 = Convert.ToBase64String(imageBytes);
}
}
Your bot will be deployed so you will not have access to local files.
You can easily convert your image located at a URL by doing the following:
using (var client = new HttpClient())
{
var bytes = await client.GetByteArrayAsync(imageUrl);
var imageInBase64String = "image/jpeg;base64," + Convert.ToBase64String(bytes);
// Do what you want with your converted image
}