Add custom save button when enableOfficeEditing: true for docx file edit option

Technical Support
1

Product: Web Viewer

Product Version:11.2.0

I am using web viewer at angular application for document edit like doc , docx file and enableOfficeEditing: true and try to add custom button like maximize and save document buttom but its not showing. here below my code

const header = instance.UI.getModularHeader(‘default-top-header’);
const existingItems = header.getItems();
const maximizeMinimizeButton = {
type: ‘statefulButton’,
initialState: ‘Maximize’,
states: {
Maximize: {
img: “”,
title: ‘Maximize’,
onClick: (update: any, activeState: any) => {
this.handleViewPortMode();
update(‘Minimize’);
},
},
Minimize: {
img: “”,
title: ‘Minimize’,
onClick: (update: any, activeState: any) => {
this.handleViewPortMode();
update(‘Maximize’);
},
},
},
dataElement: ‘maximizeMinimizeButton’,
};
const updatedItems = [
…existingItems,
{
type: ‘customButton’,
dataElement: ‘save-document-Button’,
label: ‘Save document’,
title: ‘Save document’,
class: ‘custom-save-doc-button’,
onClick: () => {
this.zone.run(() => this.saveDocument());
},
},
];
header.setItems([
…updatedItems,
!this.isShowAnnotation ? downloadButton : ‘’,
maximizeMinimizeButton,
]);
documentViewer.updateView();
instance.UI.loadDocument(
this.filePath, { filename: this.fileName, enableOfficeEditing: true }
);

thanks
sonu kumar

1 Like
2

Hi there,

Your code creates a custom ‘save button’ and a ‘maximize’ button on the toolbar:

image
image1920×962 163 KB

For reference, this is the code I used on the office editing showcase:

const header = instance.UI.getModularHeader(`default-top-header`);
const existingItems = header.getItems();
const maximizeMinimizeButton = {
    type: `statefulButton`,
    initialState: `Maximize`,
    states: {
        Maximize: {
            img: "",
            title: `Maximize`,
            onClick: (update, activeState) => {
                this.handleViewPortMode();
                update(`Minimize`);
            },
        },
        Minimize: {
            img: "",
            title: `Minimize`,
            onClick: (update, activeState) => {
                this.handleViewPortMode();
                update(`Maximize`);
            },
        },
    },
    dataElement: `maximizeMinimizeButton`,
};
const updatedItems = [
    ...existingItems,
    {
        type: `customButton`,
        dataElement: `save- document - Button`,
        label: `Save document`,
        title: `Save document`,
        class: `custom - save - doc - button`,
        onClick: () => {
            this.zone.run(() => this.saveDocument());
        },
    },
];
header.setItems([
    ...updatedItems,
    maximizeMinimizeButton,
]);
// documentViewer.updateView();
// instance.UI.loadDocument(
//     this.filePath, { filename: this.fileName, enableOfficeEditing: true }
// );

best regards,
Kevin Kim

2 Likes
3

Thank you, after enable enableOfficeEditing is true i am trying to add annotation feature as well but its not work(its working only when enableOfficeEditing is false )
instance.UI.enableElements([‘toolbarGroup-Annotate’]);
instance.UI.enableFeatures([instance.UI.Feature.Annotations]);

thanks,
sonu kumar

1 Like
4

Hi there,

That is the expected behaviour, you will need to reload the document with enableOfficeEditing: false.

best regards,
Kevin

2 Likes
5

I have added toggle button to shift annotation mode to edit mode again loading the reintialize the webviewer. i am loading the document dynamically i am using keyup event. the problem is here its show the last loaded document content is there any way to remove or destroy the previous loaded webviewer docviewer so can get only current loaded document event not previous loaded document this is my below code
i am passing apryse data through input output decorator
<app-pdf-apryse
[filePath]=“filePath”
[fileName]=“selectedFile[0]?.name”
[documentAnnotation]=“documentAnnotation”
[isShowAnnotation]=“true”
[documentEditable]=“isEditable”
[vehicleId]=“data.vehicleId”
[reportId]=“data.reportId”
[showToggleBtn]=“showToggleBtn”
(savePdfEvent)=“onSavePdf($event)”>
initial loading the webViewer at ngAfterViewInit

ngAfterViewInit(): void {
if (this.documentEditable) {
this.viewerOptions.enableOfficeEditing = true;
}
this.initializeViewer();
}

viewerOptions: any = {
licenseKey: “”
path: ‘assets/lib’,
css: ‘assets/apryse-pdf.css’,
};
private initializeViewer(): void {
this.wvInstance = null;
this.viewer.nativeElement.innerHTML = ‘’;
// this.removeEvent();
WebViewer(
this.viewerOptions,
this.viewer.nativeElement
).then(instance => {
this.wvInstance = instance;
instance.UI.loadDocument(this.filePath, { filename: this.fileName });
});

toggleBtn() {
this.documentEditable = !this.documentEditable;
if (this.documentEditable) {
this.viewerOptions.enableOfficeEditing = true;
} else {
this.viewerOptions.enableOfficeEditing = false;
this.getDocumentAnnotation(this.vehicleId, this.reportId);
}
this.initializeViewer();
}

here i am trying to use keyup event its show previous file data also its not cleaning the previous webviewer
documentViewer.addEventListener(‘keyUp’, () => {
console.log(‘fileNam’, this.fileName)
const { documentViewer } = this.wvInstance!.Core;
if (this.documentEditable) {
console.log(‘keyUp’, this.fileName);
const docData = await documentViewer.getDocument().getFileData();
const blob = new Blob([docData], {
type: ‘application/vnd.openxmlformats-officedocument.wordprocessingml.document’,
});
const formData = new FormData();
formData.append(‘file’, blob, this.fileName);
formData.append(‘userId’, this.userId ? this.userId : ‘’);
});
note: is there any textChange event is there for edit docx file at apryse
thanks
sonu kumar

6

Hi there,

If you are using

instance.UI.loadDocument(this.filePath, { filename: this.fileName });

whenever WebViewer initializes, then only this document will be loaded. You will want to call loadDocument after the toggle button.

For a text-change event, you can use officeDocumentEdited event:
https://sdk.apryse.com/api/web/Core.Document.html#event:officeDocumentEdited

Best regards,
Kevin

1 Like
7

Thank for response I am using apryse doc version 11.2.0 it’s not working for me

documentViewer.addEventListener(‘officeDocumentEdited’, () => {
console.log(‘officeDocumentEdited triggered’);
// save method
});

is there any alternative solution for this.

thanks
Sonu kumar

1 Like
8

You will need to call it on the Document object, i.e.

documentViewer.getDocument().addEventListener('officeDocumentEdited', () => {
    console.log('officeDocumentEdited triggered');
    // save method
});

best regards,
Kevin

2 Likes
9

Thank you Kevin. it’s working fine. I am facing one issue here like i have uploaded the doc file and edited and saved to db again try to open this doc file in edited mode its not open(its show only loader).
note: this problem only with doc file not docx file
below my code to save to db and getting back in url
const extension = this.fileName?.split(‘.’).pop();
const docData = await documentViewer.getDocument().getFileData();
const blob = new Blob([docData], {
type:
extension == ‘doc’
? ‘application/msword’
: ‘application/vnd.openxmlformats-officedocument.wordprocessingml.document’,
});
const formData = new FormData();
formData.append(‘file’, blob, this.fileName);

after save getting back in url like
https://example.com/2b761200-d831-4b39-8419-7948c75cf673-file-sample_100kB.doc (this is not dummy url) try to load not working in edited mode but it loading at annotation mode fine

note: this problem only with doc file not docx file
thanks
sonu

1 Like
10

Hi there,

Could you share a sample .DOC file to reproduce the issue?
Are there any error messages in the console?

best regards,
Kevin

1 Like