documentation(EJ2-000): source update from ej2-documenteditor-docs
This commit is contained in:
essentialjs2
Родитель
7b7d5e5185
Коммит
9ae001f6f9
|
|
@ -370,4 +370,5 @@ Syncfusion provides a predefined [Word Processor server docker image](https://hu
|
|||
|
||||
* [How to localize the Documenteditor container](../document-editor/global-local).
|
||||
* [How to load the document by default](../document-editor/how-to/open-default-document).
|
||||
* [How to customize tool bar](../document-editor/how-to/customize-tool-bar).
|
||||
* [How to customize tool bar](../document-editor/how-to/customize-tool-bar).
|
||||
* [How to resize Document editor component?](../../document-editor/how-to/resize-document-editor.md)
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
---
|
||||
title: "How to export document as pdf"
|
||||
component: "DocumentEditor"
|
||||
description: "Learn how to export document as pdf in Javascript Document Editor."
|
||||
---
|
||||
|
||||
# How to export the document as pdf in Javascript Document Editor
|
||||
|
||||
In this article, we are going to see how to export the document as Pdf format. You can export the document as Pdf in following ways:
|
||||
|
||||
## Export the document as pdf in client-side
|
||||
|
||||
Use [`pdf export component`](https://www.npmjs.com/package/@syncfusion/ej2-pdf-export) in application level to export the document as pdf using [`exportasimage`](../../api/document-editor/#exportasimage) API. Here, all pages will be converted to image and inserted as pdf pages(works like print as PDF). There is one limitation we can’t search the text because we are exporting the pdf as image.
|
||||
|
||||
>Note: You can install the pdf export packages from this [`link`](https://www.npmjs.com/package/@syncfusion/ej2-pdf-export).
|
||||
|
||||
The following example code illustrates how to export the document as pdf in client-side.
|
||||
|
||||
```typescript
|
||||
import {
|
||||
DocumentEditorContainer,
|
||||
ImageFormat,
|
||||
Toolbar,
|
||||
} from '@syncfusion/ej2-documenteditor';
|
||||
import {
|
||||
PdfBitmap,
|
||||
PdfDocument,
|
||||
PdfPageOrientation,
|
||||
PdfPageSettings,
|
||||
PdfSection,
|
||||
SizeF,
|
||||
} from '@syncfusion/ej2-pdf-export';
|
||||
|
||||
let container: DocumentEditorContainer = new DocumentEditorContainer({
|
||||
enableToolbar: true,
|
||||
height: '590px',
|
||||
});
|
||||
DocumentEditorContainer.Inject(Toolbar);
|
||||
container.serviceUrl =
|
||||
'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/';
|
||||
|
||||
container.appendTo('#container');
|
||||
|
||||
document.getElementById('export').addEventListener('click', function () {
|
||||
let obj = this;
|
||||
let pdfdocument: PdfDocument = new PdfDocument();
|
||||
let count: number = container.documentEditor.pageCount;
|
||||
container.documentEditor.documentEditorSettings.printDevicePixelRatio = 2;
|
||||
let loadedPage = 0;
|
||||
for (let i = 1; i <= count; i++) {
|
||||
setTimeout(() => {
|
||||
let format: ImageFormat = 'image/jpeg' as ImageFormat;
|
||||
// Getting pages as image
|
||||
let image = container.documentEditor.exportAsImage(i, format);
|
||||
image.onload = function () {
|
||||
let imageHeight = parseInt(
|
||||
image.style.height.toString().replace('px', '')
|
||||
);
|
||||
let imageWidth = parseInt(
|
||||
image.style.width.toString().replace('px', '')
|
||||
);
|
||||
let section: PdfSection = pdfdocument.sections.add() as PdfSection;
|
||||
let settings: PdfPageSettings = new PdfPageSettings(0);
|
||||
if (imageWidth > imageHeight) {
|
||||
settings.orientation = PdfPageOrientation.Landscape;
|
||||
}
|
||||
settings.size = new SizeF(imageWidth, imageHeight);
|
||||
(section as PdfSection).setPageSettings(settings);
|
||||
let page = section.pages.add();
|
||||
let graphics = page.graphics;
|
||||
let imageStr = image.src.replace('data:image/jpeg;base64,', '');
|
||||
let pdfImage = new PdfBitmap(imageStr);
|
||||
graphics.drawImage(pdfImage, 0, 0, imageWidth, imageHeight);
|
||||
loadedPage++;
|
||||
if (loadedPage == count) {
|
||||
// Exporting the document as pdf
|
||||
pdfdocument.save(
|
||||
(container.documentEditor.documentName === ''
|
||||
? 'sample'
|
||||
: container.documentEditor.documentName) + '.pdf'
|
||||
);
|
||||
}
|
||||
};
|
||||
}, 500);
|
||||
}
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
## Export document as pdf in server-side using Syncfusion DocIO
|
||||
|
||||
With the help of [`Synfusion DocIO`](https://help.syncfusion.com/file-formats/docio/word-to-pdf), you can export the document as Pdf in server-side. Here, you can search the text.
|
||||
|
||||
The following way illustrates how to convert the document as Pdf:
|
||||
|
||||
* Using [`serialize`](../../api/document-editor/#serialize) API, convert the document as Sfdt and send it to server-side.
|
||||
|
||||
The following example code illustrates how to convert the document to sfdt and pass it to server-side.
|
||||
|
||||
```typescript
|
||||
import { DocumentEditorContainer,Toolbar } from '@syncfusion/ej2-documenteditor';
|
||||
let container: DocumentEditorContainer = new DocumentEditorContainer({
|
||||
enableToolbar: true,
|
||||
height: '590px',
|
||||
});
|
||||
DocumentEditorContainer.Inject(Toolbar);
|
||||
container.serviceUrl =
|
||||
'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/';
|
||||
|
||||
container.appendTo('#container');
|
||||
|
||||
document.getElementById('export').addEventListener('click', function () {
|
||||
let http: XMLHttpRequest = new XMLHttpRequest();
|
||||
// Replace your running web service Url here
|
||||
http.open('POST', 'http://localhost:62869/api/documenteditor/ExportPdf');
|
||||
http.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
|
||||
http.responseType = 'json';
|
||||
//Serialize document content as SFDT.
|
||||
let sfdt: any = { content: container.documentEditor.serialize() };
|
||||
//Send the sfdt content to server side.
|
||||
http.send(JSON.stringify(sfdt));
|
||||
});
|
||||
```
|
||||
|
||||
* Using Save API in server-side, you can convert the sfdt to stream.
|
||||
* Finally, convert the stream to Pdf using `Syncfusion.DocIORenderer.Net.Core` library.
|
||||
|
||||
The following example code illustrates how to process the sfdt in server-side.
|
||||
|
||||
```c#
|
||||
[AcceptVerbs("Post")]
|
||||
[HttpPost]
|
||||
[EnableCors("AllowAllOrigins")]
|
||||
[Route("ExportPdf")]
|
||||
public void ExportPdf([FromBody]SaveParameter data)
|
||||
{
|
||||
// Converts the sfdt to stream
|
||||
Stream document = WordDocument.Save(data.content, FormatType.Docx);
|
||||
Syncfusion.DocIO.DLS.WordDocument doc = new Syncfusion.DocIO.DLS.WordDocument(document, Syncfusion.DocIO.FormatType.Docx);
|
||||
//Instantiation of DocIORenderer for Word to PDF conversion
|
||||
DocIORenderer render = new DocIORenderer();
|
||||
//Converts Word document into PDF document
|
||||
PdfDocument pdfDocument = render.ConvertToPDF(doc);
|
||||
// Saves the document to server machine file system, you can customize here to save into databases or file servers based on requirement.
|
||||
FileStream fileStream = new FileStream("sample.pdf", FileMode.OpenOrCreate, FileAccess.ReadWrite);
|
||||
//Saves the PDF file
|
||||
pdfDocument.Save(fileStream);
|
||||
pdfDocument.Close();
|
||||
fileStream.Close();
|
||||
document.Close();
|
||||
}
|
||||
```
|
||||
|
||||
Get the complete working sample in this [`link`](https://github.com/SyncfusionExamples/Export-document-as-PDF-in-Document-Editor/).
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
---
|
||||
title: "how to resize document editor"
|
||||
component: "DocumentEditor"
|
||||
description: "Learn how to change height and width of JavaScript Document Editor component."
|
||||
---
|
||||
|
||||
# How to change height and width of of JavaScript Document Editor component
|
||||
|
||||
In this article, we are going to see how to change height and width of Documenteditor.
|
||||
|
||||
## Change height of Document Editor
|
||||
|
||||
DocumentEditorContainer initially render with default height. You can change height of documenteditor using [`height`](../../api/document-editor-container/documentEditorContainerModel/#height) property, the value which is in pixel.
|
||||
|
||||
The following example code illustrates how to change height of Document Editor.
|
||||
|
||||
```typescript
|
||||
|
||||
let container: DocumentEditorContainer = new DocumentEditorContainer({
|
||||
enableToolbar:true, height: "590px"
|
||||
});
|
||||
container.appendTo('#DocumentEditor');
|
||||
|
||||
```
|
||||
|
||||
Similarly, you can use [`height`](../../api/document-editor#height) property for DocumentEditor also.
|
||||
|
||||
## Change width of Document Editor
|
||||
|
||||
DocumentEditorContainer initially render with default width. You can change width of documenteditor using [`width`](../../api/document-editor-container/documentEditorContainerModel/#width) property, the value which is in percent.
|
||||
|
||||
The following example code illustrates how to change width of Document Editor.
|
||||
|
||||
```typescript
|
||||
|
||||
let container: DocumentEditorContainer = new DocumentEditorContainer({
|
||||
enableToolbar:true, width: "100%"
|
||||
});
|
||||
container.appendTo('#DocumentEditor');
|
||||
|
||||
```
|
||||
|
||||
Similarly, you can use [`width`](../../api/document-editor#width) property for DocumentEditor also.
|
||||
|
||||
## Resize Document Editor
|
||||
|
||||
Using [`resize`](../../api/document-editor-container#resize) method, you change height and width of Document editor.
|
||||
|
||||
The following example code illustrates how to fit Document Editor to browser window size.
|
||||
|
||||
```typescript
|
||||
import {
|
||||
DocumentEditorContainer,
|
||||
Toolbar,
|
||||
} from '@syncfusion/ej2-documenteditor';
|
||||
|
||||
let container: DocumentEditorContainer = new DocumentEditorContainer({enableToolbar: true,height: '590px'});
|
||||
DocumentEditorContainer.Inject(Toolbar);
|
||||
container.serviceUrl =
|
||||
'https://ej2services.syncfusion.com/production/web-services/api/documenteditor/';
|
||||
|
||||
container.created = (): void => {
|
||||
setInterval(() => {
|
||||
updateDocumentEditorSize();
|
||||
}, 100);
|
||||
//Adds event listener for browser window resize event.
|
||||
window.addEventListener('resize', onWindowResize);
|
||||
};
|
||||
container.appendTo('#container');
|
||||
|
||||
function onWindowResize() {
|
||||
//Resizes the document editor component to fit full browser window automatically whenever the browser resized.
|
||||
updateDocumentEditorSize();
|
||||
}
|
||||
function updateDocumentEditorSize() {
|
||||
//Resizes the document editor component to fit full browser window.
|
||||
var windowWidth = window.innerWidth;
|
||||
var windowHeight = window.innerHeight;
|
||||
container.resize(windowWidth, windowHeight);
|
||||
}
|
||||
```
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
---
|
||||
title: "how to show and hide spinner while opening document"
|
||||
component: "DocumentEditor"
|
||||
description: "Learn how to show and hide spinner while opening document in JavaScript Document Editor component."
|
||||
---
|
||||
|
||||
# How to show and hide spinner while opening document in JavaScript Document Editor component
|
||||
|
||||
Using [`spinner`](https://ej2.syncfusion.com/documentation/spinner/getting-started/#create-the-spinner-globally) component, you can show/hide spinner while opening document in DocumentEditor .
|
||||
|
||||
Example code snippet to show/hide spinner
|
||||
|
||||
```typescript
|
||||
// showSpinner() will make the spinner visible
|
||||
showSpinner(document.getElementById('container'));
|
||||
|
||||
// hideSpinner() method used hide spinner
|
||||
hideSpinner(document.getElementById('container'));
|
||||
```
|
||||
|
||||
Refer to the following example.
|
||||
|
||||
{% tab template="document-editor/spinner",es5Template="spinner" , sourceFiles="index.ts,index.html" %}
|
||||
|
||||
```typescript
|
||||
import { DocumentEditorContainer,Toolbar } from '@syncfusion/ej2-documenteditor';
|
||||
import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-popups';
|
||||
|
||||
DocumentEditorContainer.Inject(Toolbar);
|
||||
let container: DocumentEditorContainer = new DocumentEditorContainer({
|
||||
enableToolbar: true, height:"400"
|
||||
});
|
||||
createSpinner({
|
||||
// Specify the target for the spinner to show
|
||||
target: document.getElementById('container')
|
||||
});
|
||||
|
||||
document.getElementById('import').addEventListener('click',function(){
|
||||
// load your default document here
|
||||
let data: string= '{"sections":[{"sectionFormat":{"pageWidth":612,"pageHeight":792,"leftMargin":72,"rightMargin":72,"topMargin":72,"bottomMargin":72,"differentFirstPage":false,"differentOddAndEvenPages":false,"headerDistance":36,"footerDistance":36,"bidi":false},"blocks":[{"paragraphFormat":{"afterSpacing":30,"styleName":"Heading 1","listFormat":{}},"characterFormat":{},"inlines":[{"characterFormat":{},"text":"Adventure Works Cycles"}]}],"headersFooters":{"header":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]},"footer":{"blocks":[{"paragraphFormat":{"listFormat":{}},"characterFormat":{},"inlines":[]}]}}}],"characterFormat":{"bold":false,"italic":false,"fontSize":11,"fontFamily":"Calibri","underline":"None","strikethrough":"None","baselineAlignment":"Normal","highlightColor":"NoColor","fontColor":"empty","fontSizeBidi":11,"fontFamilyBidi":"Calibri","allCaps":false},"paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":0,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","listFormat":{},"bidi":false},"defaultTabWidth":36,"trackChanges":false,"enforcement":false,"hashValue":"","saltValue":"","formatting":false,"protectionType":"NoProtection","dontUseHTMLParagraphAutoSpacing":false,"formFieldShading":true,"styles":[{"name":"Normal","type":"Paragraph","paragraphFormat":{"lineSpacing":1.149999976158142,"lineSpacingType":"Multiple","listFormat":{}},"characterFormat":{"fontFamily":"Calibri"},"next":"Normal"},{"name":"Default Paragraph Font","type":"Character","characterFormat":{}},{"name":"Heading 1 Char","type":"Character","characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 1","type":"Paragraph","paragraphFormat":{"beforeSpacing":12,"afterSpacing":0,"outlineLevel":"Level1","listFormat":{}},"characterFormat":{"fontSize":16,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 1 Char","next":"Normal"},{"name":"Heading 2 Char","type":"Character","characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 2","type":"Paragraph","paragraphFormat":{"beforeSpacing":2,"afterSpacing":6,"outlineLevel":"Level2","listFormat":{}},"characterFormat":{"fontSize":13,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 2 Char","next":"Normal"},{"name":"Heading 3","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level3","listFormat":{}},"characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 3 Char","next":"Normal"},{"name":"Heading 3 Char","type":"Character","characterFormat":{"fontSize":12,"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"},{"name":"Heading 4","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level4","listFormat":{}},"characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 4 Char","next":"Normal"},{"name":"Heading 4 Char","type":"Character","characterFormat":{"italic":true,"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 5","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level5","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Normal","link":"Heading 5 Char","next":"Normal"},{"name":"Heading 5 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#2F5496"},"basedOn":"Default Paragraph Font"},{"name":"Heading 6","type":"Paragraph","paragraphFormat":{"leftIndent":0,"rightIndent":0,"firstLineIndent":0,"textAlignment":"Left","beforeSpacing":2,"afterSpacing":0,"lineSpacing":1.0791666507720947,"lineSpacingType":"Multiple","outlineLevel":"Level6","listFormat":{}},"characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Normal","link":"Heading 6 Char","next":"Normal"},{"name":"Heading 6 Char","type":"Character","characterFormat":{"fontFamily":"Calibri Light","fontColor":"#1F3763"},"basedOn":"Default Paragraph Font"}],"lists":[],"abstractLists":[],"comments":[],"revisions":[],"customXml":[]}';
|
||||
|
||||
// showSpinner() will make the spinner visible
|
||||
showSpinner(document.getElementById('DocumentEditor'));
|
||||
// Open the default document
|
||||
container.documentEditor.open(data);
|
||||
setInterval(function(){
|
||||
|
||||
// hideSpinner() method used hide spinner
|
||||
hideSpinner(document.getElementById('DocumentEditor'));
|
||||
|
||||
}, 5000);
|
||||
});
|
||||
container.appendTo('#DocumentEditor');
|
||||
```
|
||||
|
||||
{% endtab %}
|
||||
|
||||
>Note: In above example, we have used setInterval to hide spinner, just for demo purpose.
|
||||
|
|
@ -221,4 +221,5 @@ The following table illustrates the reasons for pagination (page-by-page display
|
|||
|
||||
## See Also
|
||||
|
||||
* [Feature modules](../document-editor/feature-module/)
|
||||
* [Feature modules](../document-editor/feature-module/)
|
||||
* [How to show and hide spinner while opening document in DocumentEditor](../document-editor/how-to/show-hide-spinner.md)
|
||||
|
|
@ -52,3 +52,6 @@
|
|||
* [Disable Optimized Text Measuring](document-editor/how-to/disable-optimized-text-measuring.md)
|
||||
* [Get the selected content](document-editor/how-to/get-the-selected-content.md)
|
||||
* [Set the default format in Document Editor](document-editor/how-to/set-default-format-in-document-editor.md)
|
||||
* [Show and hide spinner](document-editor/how-to/show-hide-spinner.md)
|
||||
* [Resize document editor](document-editor/how-to/resize-document-editor.md)
|
||||
* [Export the document as Pdf](document-editor/how-to/export-document-as-pdf.md)
|
||||
Загрузка…
Ссылка в новой задаче