I am using jspdf for converting html to pdf by following code.
html2canvas(document.getElementById("page4")).then(
function(canvas) {
document.body.appendChild(canvas);
var context = canvas.getContext("2d");
var imgData4 = canvas.toDataURL("image/jpeg");
var doc = new jsPDF(options, "", "", "");
doc.addPage();
doc.addImage(imgData4, 'jpeg', 0, 0);
doc.save(enrId + ".pdf");
});
First im converting html to jpeg. I have 4 pages so each page is separate jpeg
Then i have assigned every page into pdf page
like that, im converting html to pdf.
I dont facing any problem here, but memory is a problem here
Here my problem is,
pdf size is around 1.5MB to 2MB. How can i reduce the pdf size?
If it is not possible, Suggest some other plugin for convert html to pdf
I've got the same problem using PNG, now I'm usig JPEG format, and the file size went from 6000 ko to 300 ko.
Try this code :
canvas.toDataURL( 'image/jpeg', 1.0 );
to vary the quality :
var fullQuality = canvas.toDataURL('image/jpeg', 1.0);
var mediumQuality = canvas.toDataURL('image/jpeg', 0.5);
var lowQuality = canvas.toDataURL('image/jpeg', 0.1);
More information in this page :
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
Related
I have a need to embed MS-Office documents (Excel, Word) into AutoCAD using Design Automation. Searching around the web, it seems that this is not possible because the MS-Office applications, which would act as an OLE Client, would need to be running on the Forge Server. Could someone confirm that this is the case?
If I am correct in my above statement, my next best alternative would be to embed .EMF files created from each page of the document I want to embed; alternatively using raster images would also be acceptable. Creating the .EMF or raster files is not a problem. I just can't find a solution for embedding the file that does not involve copying them to the clipboard and using the PASTECLIP command. This approach has worked for me in the AutoCAD application using a C# AutoCAD.NET plugin, an OLE2Frame object is created, but it fails in accoreconsole (because PASTECLIP uses a UI class which is not available). This leads me to think that the same would occur while running the bundle in Design Automation.
The best I have been able achieve so far is to write a raster image files to the working directory and linking the raster images to the AutoCAD document using RasterImageDef and RasterImage (code below). Is this the only way I can do this? Can I do something similar using an EMF image, which is vector based, instead of a raster image? Or is there a way to actually embed an EMF (preferred) or raster image instead of just linking the images?
The code below fails if I use .EMF files, because RasterImageDef and RasterImage do not support the the EMF file; the EMF file being a vector format, not a raster format?
[CommandMethod("TEST")]
public void Test()
{
Document doc = Application.DocumentManager.MdiActiveDocument;
Database db = doc.Database;
Editor ed = doc.Editor;
// Get the file name of the image using the editor to prompt for the file name
// Create the prompt
PromptOpenFileOptions options = new PromptOpenFileOptions("Enter Sequence file path");
options.PreferCommandLine = true;
// Get the file name, use no quotes
PromptFileNameResult result = null;
try { result = ed.GetFileNameForOpen(options); }
catch (System.Exception ex)
{
DisplayLogMessage($"Could not get sequence file location. Exception: {ex.Message}.", ed);
return;
}
// Get the rtf filename from the results
string filename = result.StringResult;
DisplayLogMessage($"Got sequence filename: {filename}", ed);
// Load the Sequence.rtf document
Aspose.Words.Document seq;
using (FileStream st = new FileStream(filename, FileMode.Open))
{
seq = new Aspose.Words.Document(st);
st.Close();
}
DisplayLogMessage($"Aspose.Words Loaded: {filename}", ed);
Transaction trans = db.TransactionManager.StartTransaction();
// Get or create the image dictionary
ObjectId imageDictId = RasterImageDef.GetImageDictionary(db);
if (imageDictId != null)
imageDictId = RasterImageDef.CreateImageDictionary(db);
// Open the Image Dictonary
DBDictionary imageDict = (DBDictionary)trans.GetObject(imageDictId, OpenMode.ForRead);
double x = 0.0;
double y = 0.0;
try
{
// For each page in the Sequence.
for (int i = 0; i < seq.PageCount; i++)
{
DisplayLogMessage($"Starting page {i + 1}", ed);
// extract the page.
Aspose.Words.Document newSeq = seq.ExtractPages(i, 1);
Aspose.Words.Saving.ImageSaveOptions imgOptions = new Aspose.Words.Saving.ImageSaveOptions(Aspose.Words.SaveFormat.Emf);
imgOptions.Resolution = 300;
DisplayLogMessage($"Extracted page {i + 1}", ed);
string dictName = Guid.NewGuid().ToString();
filename = Path.Combine(Path.GetDirectoryName(doc.Name), dictName + ".Emf");
// Save the image
SaveOutputParameters sp = newSeq.Save(filename, imgOptions);
DisplayLogMessage($"Saved {dictName}.Emf", ed);
RasterImageDef imageDef = null;
ObjectId imageDefId;
// see if my guid is in there
if (imageDict.Contains(dictName))
imageDefId = (ObjectId)imageDict.GetAt(dictName);
else
{
// Create an image def
imageDef = new RasterImageDef();
imageDef.SourceFileName = $"./{dictName}.Emf";
// load the image
imageDef.Load();
imageDict.UpgradeOpen();
imageDefId = imageDict.SetAt(dictName, imageDef);
trans.AddNewlyCreatedDBObject(imageDef, true);
}
// create raster image to reference the definition
RasterImage image = new RasterImage();
image.ImageDefId = imageDefId;
// Prepare orientation
Vector3d uCorner = new Vector3d(8.5, 0, 0);
Vector3d vOnPlane = new Vector3d(0, 11, 0);
Point3d ptInsert = new Point3d(x, y, 0);
x += 8.5;
CoordinateSystem3d coordinateSystem = new CoordinateSystem3d(ptInsert, uCorner, vOnPlane);
image.Orientation = coordinateSystem;
// some other stuff
image.ImageTransparency = true;
image.ShowImage = true;
// Add the image to ModelSpace
BlockTable bt = (BlockTable)trans.GetObject(db.BlockTableId, OpenMode.ForRead);
BlockTableRecord btr = (BlockTableRecord)trans.GetObject(bt[BlockTableRecord.ModelSpace], OpenMode.ForWrite);
btr.AppendEntity(image);
trans.AddNewlyCreatedDBObject(image, true);
// Create a reactor between the RasterImage
// and the RasterImageDef to avoid the "Unreferenced"
// warning the XRef palette
RasterImage.EnableReactors(true); // in the original was true
image.AssociateRasterDef(imageDef);
}
trans.Commit();
}
catch (System.Exception ex)
{
DisplayLogMessage("ERROR: " + ex.Message,ed);
trans.Abort();
}
}
Raster images are always linked. There's no way to embed them. The only way to embed an image is to use AcDbOle2Frame (C++) or Autodesk.AutoCAD.DatabaseServices.Ole2Frame (C#). In theory, it is possible to create these objects without the "OLE server" being present but I haven't tried so I don't know if enough APIs are exposed to make it happen.
You should try it and see how far you can get.
Albert
There is way to embed raster image, it is not straightforeward, you need to use C++\ObjectARX API, please refer this https://github.com/MadhukarMoogala/EmbedRasterImage/tree/EmbedRasterImageUsingDBX
I am working on to export the table data to pdf format using Reactjs. I am showing the json data in the form of a HTML table inside Reactjs component.
I have given a button named as Export to export the data in any format. For now I am working only to export the data to PDF Format. Can anyone help me with this. Is there any Package to import or any specific code to do to export the data to PDF file. Anything can be useful. Thanks in Advance...
You can convert your dom to canvas and save the canvas as pdf,
DOM to canvas,
const input = document.getElementById('mytable');
html2canvas(input)
.then((canvas) => {
const imgData = canvas.toDataURL('image/png');
})
;
Canvas to pdf,
html2canvas(input)
.then((canvas) => {
const imgData = canvas.toDataURL('image/png');
const pdf = new jsPDF();
pdf.addImage(imgData, 'PNG', 0, 0);
pdf.save("download.pdf");
});
;
Refer https://medium.com/#shivekkhurana/how-to-create-pdfs-from-react-components-client-side-solution-7f506d9dfa6d
As suggested ,
We can also use jspdf-autotable to generate pdf (works only with table or jsonarray),
var doc = new jsPDF();
// You can use html:
doc.autoTable({html: '#my-table'});
// Or JavaScript:
doc.autoTable({
head: [['Name', 'Email', 'Country']],
body: [
['David', 'david#example.com', 'Sweden'],
['Castille', 'castille#example.com', 'Norway'],
// ...
]
});
doc.save('table.pdf');
Download the .zip file and check the demo file. then use it. link below.
tableExport.jquery.plugin-master
So, this must be something more than I have to struggle with. I let users store images, now privately, hence I need to be able to request images with the Authorization header. <img> doesn't allow this however (and no, I don't want to add a ?token=xxx to the request). So I have to load the image using axios.get and then convert the binary representation of the image to Base64, and embed the image using the Data URI. Simple, right?
So what I have to do is img.src=data:image/jpeg;base64,xxxxxxxxx where all the x:s should be replaced with the Base64 representation of the image. I tried using btoa but only got about 20 characters in my Base64. The image is on 700Kb.
Can it be that btoa can't handle images that size?
Are there any other way of doing this?
I do not use browserify or webpack, so I don't want to use Buffer to solve this.
EDIT: The first comment I received was actually the correct answer to my question, with just a small adjustment.
getBase64(arrayBuffer) {
var reader = new FileReader();
var that = this;
reader.onloadend = function () {
that.mainImage = reader.result;
};
reader.readAsDataURL(new Blob([new Uint8Array(arrayBuffer)], { type: 'image/jpeg' }));
}
I added a Blob to contain my ArrayBuffer, and I had to convert
ArrayBuffer to UInt8Array for the blob to be able to iterate over it.
And in my Vue template
<img class="responsive-img" :src="mainImage"></img>
try this.
getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.log(reader.result);
};
},
this.getBase64(this.selected_file);
My requirement is to save a bunch of files (more than 500) in a single zip file locally using FileReference. I am using ASZip to zip the files. Now the problem is if the number of files are more, then I am not even getting Save as dialog box.
I have tried different combinations of data to see whether it is number of files or file size limitation, but it looks like the script automatically stops (irrespective of number of files), if it can't give me the output within a minute.
This is the code that I am using
//*****test code
var myZip:ASZip = new ASZip (CompressionMethod.GZIP);
var myByteArray:ByteArray = new ByteArray();var pdfFile:PDF;
var newPage:Page;
var printPage:BorderContainer;
for (var i:int=0;i<330;i++)
{
printPage = new BorderContainer();
printPage.visible = false;
printPage.x=0;
printPage.y=0;
printPage.includeInLayout = false;
printPage.width = 816+10;
printPage.height = 1056+23;
this.addElement(printPage);
pdfFile = new PDF(Orientation.PORTRAIT, Unit.INCHES, Size.A3 );
pdfFile.setDisplayMode( Display.FULL_PAGE,Layout.SINGLE_PAGE );
newPage = new Page ( Orientation.PORTRAIT,Unit.INCHES,new Size([816+10,1056+10],"MyFavoriteSize",[8.5+10,11+10],[816/0.125,1056/0.218]));
pdfFile.addPage(newPage);
pdfFile.beginFill(new RGBColor(0xFFFFFF));
pdfFile.textStyle(new RGBColor(0x000000));
pdfFile.addImage(printPage,null,-0.5,-0.5,8.5+4,11.5+4);
myByteArray = pdfFile.save(org.alivepdf.saving.Method.LOCAL);
myZip.addFile(myByteArray,i + ".pdf");
}
Can you please let me know what can be done to fix this issue?
Thanks,
Satish.
I like to use JSFiddle when designing a new interface because I find it convenient for various tools within. I'm working on the front end of a site where I want to use a video, and unlike an image, I cant just throw it up on imgur and link to it for free instant hosting while I fiddle with the interface design.
So I want to know if I can somehow use a local file on my PC as the source for an HTML video element hosted on a live site. Obviously this is trivial to do with a web project being worked on on my Desktop, but I'm not sure it can be done on a live test.
For example this would work on a page I open from my desktop, living on my PC:
<video id="Video-Player">
<source src="../movie.mp4" type="video/mp4"/>
</video>
But I don't know whether I can do the equivalent with a page living on the web.
Here's how to allow a user to select an image from their local machine. This should get you started in the right direction.
Add a file input button in the HTML
<input type="file" id="file-btn"/>
and the corresponding handler
document.getElementById('file-btn').addEventListener('change', function(e){
readFiles(e.target.files);
})
Then the code to read the files
function readFiles(files){
files = [].slice.call(files); //turning files into a normal array
for (var file of files){
var reader = new FileReader();
reader.onload = createOnLoadHandler(file);
//there are also reader.onerror reader.onloadstart, reader.onprogress, and reader.onloadend handlers
reader.readAsDataURL(file);
}
}
Now, I've only done this with images, but this is how I read the image data.
function createOnLoadHandler(file){
console.log('reading ' + file.name + ' of type ' + file.type)
function onLoad(e){
var data = e.target.result
display(data);
}
return onLoad
}
function display(data){
var img = document.createElement('img');
img.src = data;
var context = canvas.getContext('2d')
context.clearRect(0, 0, WIDTH, HEIGHT);
context.drawImage(img, 0, 0, WIDTH, HEIGHT);
}
Here is a demo of the above code.
As a side note, if you try to read images from another domain you'll run into cross origin policy issues. I would think the same problem exists for videos as well.