HTML - Setting Export Width or responsive images

Aspose.Total Product Family
1

I’m using Aspose.pdf and Aspose.word to export to html

is there a way to set the export width for the page, tables and images respectfully ?

for example if an image size is 1000 px and it filling 80% of the word page width…

When I export I’m looking to show the html inside a div 800 px Width, so I want to set the exported page width to 800 so that aspose engine can calculate the new width for images, tables to be set in the html

OR

just export everything in em or % responsive unit format instead of pt

Thank you

2

Hi Bishoy,


Thanks for your inquiry. Please share following detail for our reference. We will then provide you more information about your query along with code.

  • Please share your input file formats
  • Please share your input document
  • Please share your expected output Html showing the desired behavior.
  • Please share the output html showing the undesired behavior.

Thanks for your cooperation.
3

Please share your input file formats

  • docx, doc, pdf

share your input document

  • Do you mean a sample document ?

http://files.acecqa.gov.au/files/National-Quality-Framework-Resources-Kit/FOUR%20-%20Appendix%202%20Quality%20Improvement%20Plan%20template%20of%20Guide%20to%20Developing%20a%20Quality%20Improvement%20Plan.docx

Please share your expected output Html showing the desired behavior.

Attached called Exported

Please share the output html showing the undesired behavior.

Attached called Improved. I have just turned images and table into 100% width instead of physical ones

4

Hi Bishoy,


Thanks for sharing the detail. We are working over your query and will get back to you soon.
5

Hi Bishoy,

Thanks for your patience. Please use following code example to export table’s width as 100%. Hope this helps you.

Unfortunately, Aspose.Words does not export the image’s width in percentage value in output Html. We have logged a feature request as WORDSNET-13915 to export the image’s width in percentage value when document is exported to Html. You will be notified via this forum thread once this feature is available. We apologize for your inconvenience.

Document doc = new Document(MyDir + "in.docx");

foreach (Section section in doc.Sections)
{
    section.PageSetup.Orientation = Orientation.Portrait;

    foreach (Table table in section.Body.Tables)
    {
        table.PreferredWidth = PreferredWidth.FromPercent(100);
        table.AutoFit(AutoFitBehavior.AutoFitToWindow);
    }
}

doc.Save(MyDir + "Out v16.6.0.html");
6

Thank you thats great,

Now

  1. What about the PDF ?
  2. Isn’t there anyway to do the same with images too ?
  3. for the percentage, you are setting it to 100% is there a way to set it relevant to the width/document width ?
7
Hi Bishoy,

Thanks for your inquiry.
bishoy.a.hanna:
Now 1. What about the PDF ?
We are moving this forum thread to Aspose.Total forum. My colleagues from Aspose.Pdf team will reply you soon.
bishoy.a.hanna:
2. Isn't there anyway to do the same with images too ?
3. for the percentage, you are setting it to 100% is there a way to set it relevant to the width/document width ?
Unfortunately, there is no API to set image's width in percentage value. However, you can set image's width in points. Please iterate through all shape's nodes and set their width using Shape.Width property.
8

@bishoy.a.hanna

I am afraid due to some network issues, the earlier shared attachment appears to be broken. Can you please again try sharing the PDF document, so that we can test the scenario in our environment.

Meanwhile in order to generate the HTML with respective page dimensions, you need to first set page dimensions for source/input PDF file and then you can perform the conversion. For more information, please visit

9

Attached… I really appreciate your support

Simply, I;m asking if I can export in responsive html



Thank you

10

Hi Bishoy,

Thanks for sharing the resource file.

I have tested the scenario using following code snippet and as per my observations, the PDF file is being exported to respective dimensions.

[C#]

// Select desirable page size
float newPageWidth = 400f;
float newPageHeight = 400f;

// Tune PdfPageEditor class
Aspose.Pdf.Facades.PdfPageEditor pdfEditor = new Aspose.Pdf.Facades.PdfPageEditor();

// Bind source PDF file
pdfEditor.BindPdf(@"C:\pdftest\PDF-Complex\PDF-Complex\GCrisp.pdf");

// Set the page dimensions
pdfEditor.PageSize = new Aspose.Pdf.PageSize(newPageWidth, newPageHeight);

// Set vertical alignment for page as center aligned
pdfEditor.VerticalAlignmentType = Aspose.Pdf.VerticalAlignment.Center;

// Set Horizontal alignment for page as center aligned
pdfEditor.HorizontalAlignment = Aspose.Pdf.HorizontalAlignment.Center;

// This scales page content to fit width,
// comment it out or set Zoom to 1.0F if You don't want to scale
// content and only want to change page's size (i.e. crop it)
float zoom = Math.Min((float)newPageWidth / (float)pdfEditor.Document.Pages[1].Rect.Width,
            (float)newPageHeight / (float)pdfEditor.Document.Pages[1].Rect.Height);

pdfEditor.Zoom = zoom;// (float)595;

// Create stream object to hold file with updated dimensions
MemoryStream output = new MemoryStream();

// Save file to stream object
pdfEditor.Save(output);

// Then reload scaled document and save it to HTML
Document exportDoc = new Document(output);

HtmlSaveOptions htmlOptions = new HtmlSaveOptions();

// This code shows page boreder in result - sometimes it comes in handy to see borders
SaveOptions.BorderPartStyle borderStyle = new SaveOptions.BorderPartStyle();
borderStyle.LineType = SaveOptions.HtmlBorderLineType.Dotted;
borderStyle.Color = System.Drawing.Color.Gray;

htmlOptions.PageBorderIfAny = new SaveOptions.BorderInfo(borderStyle);

// Conversion to HTML itself
exportDoc.Save(@"C:\pdftest\PDF-Complex\PDF-Complex\GCrisp_new.html", htmlOptions);

// Close the stream object
output.Close();