Локализация веб редактора PDF документа

В этом разделе

VintaSoft ASP.NET Core PDF Editor Demo предоставляет словари локализации, которые позволяют локализовать веб редактор PDF документа (WebPdfDocumentEditorControlJS) на 45 языков (африкаанс, арабский, армянский, азербайджанский, белорусский, болгарский, китайский, хорватский, чешский, датский, голландский, английский, эстонский, финский, французский, грузинский, немецкий, греческий, иврит, хинди, венгерский, итальянский, японский, казахский, корейский, киргизский, латышский, литовский, норвежский, португальский, румынский, русский, словацкий, словенский, испанский, суахили, шведский, таджикский, татарский, турецкий, туркменский, украинский, узбекский, вьетнамский, зулусский).
Словари локализации можно найти в папке "\VintaSoft\Imaging .NET 14.0\Examples\ASP.NET Core\CSharp\AspNetCorePdfEditorDemo\wwwroot\locales\".

Если вы хотите создать собственный словарь локализации для пользовательского интерфейса веб просмотрщика документов, вам необходимо выполнить следующие шаги:

Определить список языков для локализации.
Создать словари для локализации.
Добавить JavaScript код для локализации пользовательского интерфейса.

Если вы создали пользовательский словарь локализации для веб просмотрщика документов и хотите поделиться своим словарем с другими пользователями, отправьте нам созданный пользовательский словарь, и мы включим его в исходные коды VintaSoft ASP.NET Core PDF Editor Demo.

1. Определение списка языков для локализации

Для начала необходимо определить список языков для локализации и создать файл настроек локализации, например, "settings.json". Вот содержимое файла "settings.json", который определяет, что интерфейс может быть локализован на английский и немецкий языки:

JSON

{
  "locales": [ "en", "af", "ar", "bg", "cs", "da", "de", "el", "es", "fi", "fr", "he", "hi", "hr", "hu", "it", "ja", "ko", "nb", "nl", "pt", "ro", "ru", "sv", "tr", "vi", "zh" ]
}

Затем файл "settings.json" необходимо добавить к содержимому веб-приложения, например, поместить его в папку "locales".

В завершение необходимо добавить на веб-страницу элемент "link" с информацией о настройках локализации:

HTML

<link rel="localization" href="/locales/settings.json">

2. Создание словарей для локализации

Файл словаря должен иметь имя, которое соответствует имени локали браузера, с расширением ".txt". Например, файл словаря английского языка должен иметь имя "en.txt", файл словаря немецкого языка должен иметь имя "de.txt", файл словаря французского языка должен иметь имя "fr.txt", файл словаря испанского языка должен иметь имя "es.txt", файл словаря итальянского языка должен иметь имя "it.txt", файл словаря португальского языка должен иметь имя "pt.txt", файл словаря русского языка должен иметь имя "ru.txt".

Файл словаря должен располагаться в той же папке, что и файл "settings.json". В нашем случае эта папка называется "locales".

Для создания словаря английского языка необходимо выполнить следующие шаги:

Отобразить на HTML-странице все элементы, которые должны быть локализованы.
Создать экземпляр класса VintasoftLocalizationJS, который позволяет локализовать DOM-элементы на HTML-странице.
Вызвать функцию VintasoftLocalizationJS.getDocumentLocalizationDictionary для получения словаря локализации на английском языке для DOM-элементов на HTML-странице.
Сериализовать словарь локализации на английском языке с помощью функции "JSON.stringify".
Сохранить сериализованный JSON-объект в файл с именем "en.txt".

Вот JavaScript код, который демонстрирует, как создать словарь локализации для HTML-страницы, содержащей веб просмотрщик документов:

JavaScript

...
// create UI localizer
_localizer = new Vintasoft.Shared.VintasoftLocalizationJS();
...

/**
 Creates the dictionary for localization of application UI.
*/
function __createUiLocalizationDictionary() {
    __createDocumentViewerDialogsForLocalization();

    var localizationDict = _localizer.getDocumentLocalizationDictionary();
    var localizationDictString = JSON.stringify(localizationDict, null, '\t');
    console.log(localizationDictString);
}

/**
 Creates the dialogs, which are used in Web PDF Document Editor, for localization.
*/
function __createPdfDocumentEditorDialogsForLocalization() {
    var floatingContainer = document.getElementById("pdfDocumentEditorContainer");

    // create a temporary document password dialog - dialog is necessary for localization purposes only
    var documentPasswordDialog = new Vintasoft.Imaging.UI.Dialogs.WebUiDocumentPasswordDialogJS();
    documentPasswordDialog.render(floatingContainer);
    tempDialogs.push(documentPasswordDialog);

    // create a temporary image selection dialog - dialog is necessary for localization purposes only
    var imageSelectionDialog = new Vintasoft.Imaging.UI.Dialogs.WebImageSelectionDialogJS();
    imageSelectionDialog.render(floatingContainer);
    tempDialogs.push(imageSelectionDialog);

    // create a temporary print images dialog - dialog is necessary for localization purposes only
    var printImagesDialog = new Vintasoft.Imaging.UI.Dialogs.WebPrintImagesDialogJS();
    printImagesDialog.render(floatingContainer);
    tempDialogs.push(printImagesDialog);

    // create a temporary image viewer setting dialog - dialog is necessary for localization purposes only
    var imageViewerSettingsDialog = new Vintasoft.Imaging.UI.Dialogs.WebImageViewerSettingsDialogJS();
    imageViewerSettingsDialog.render(floatingContainer);
    tempDialogs.push(imageViewerSettingsDialog);

    // create a temporary thumbnail viewer setting dialog - dialog is necessary for localization purposes only
    var thumbnailViewerSettingsDialog = new Vintasoft.Imaging.UI.Dialogs.WebThumbnailViewerSettingsDialogJS();
    thumbnailViewerSettingsDialog.render(floatingContainer);
    tempDialogs.push(thumbnailViewerSettingsDialog);

    // create a temporary PDF redaction mark appearance dialog - dialog is necessary for localization purposes only
    var pdfRedactionMarkAppearanceDialog = new Vintasoft.Imaging.Pdf.UI.Dialogs.WebPdfRedactionMarkAppearanceDialogJS();
    pdfRedactionMarkAppearanceDialog.render(floatingContainer);
    tempDialogs.push(pdfRedactionMarkAppearanceDialog);

    // create a temporary PDF image resource dialog - dialog is necessary for localization purposes only
    var pdfImageResourceDialog = new Vintasoft.Imaging.Pdf.UI.Dialogs.WebUiPdfImageResourceDialogJS();
    pdfImageResourceDialog.render(floatingContainer);
    tempDialogs.push(pdfImageResourceDialog);

    // create a temporary PDF/A conversion and validation dialog - dialog is necessary for localization purposes only
    var pdfAConversionAndValidationDialog = new Vintasoft.Imaging.Pdf.UI.Dialogs.WebUiPdfAConversionAndValidationDialogJS();
    pdfAConversionAndValidationDialog.render(floatingContainer);
    tempDialogs.push(pdfAConversionAndValidationDialog);

    // create a temporary PDF document compressor dialog - dialog is necessary for localization purposes only
    var pdfDocumentCompressDialog = new Vintasoft.Imaging.Pdf.UI.Dialogs.WebPdfDocumentCompressorDialogJS();
    pdfDocumentCompressDialog.render(floatingContainer);
    tempDialogs.push(pdfDocumentCompressDialog);

    // create a temporary export file setting dialog - dialog is necessary for localization purposes only
    var exportFileSettingsDialog = new Vintasoft.Imaging.UI.Dialogs.WebExportFileSettingsDialogJS();
    exportFileSettingsDialog.render(floatingContainer);
    tempDialogs.push(exportFileSettingsDialog);
    
    // create a temporary thumbnail viewer context menu panel - panel is necessary for localization purposes only
    var thumbnailViewerContextMenu = new Vintasoft.Imaging.UI.UIElements.WebThumbnailViewerContextMenuJS(_pdfDocumentEditor._thumbnailViewer, {});
    thumbnailViewerContextMenu.render(floatingContainer);
    tempDialogs.push(thumbnailViewerContextMenu);
}

Для создания словаря немецкого языка (или любого другого языка, кроме английского) необходимо выполнить следующие шаги:

Использовать словарь локализации на английском языке в качестве шаблона для словаря локализации на немецком языке, т.е. скопировать файл "en.txt" в файл "de.txt".
Перевести текстовые значения с английского языка на немецкий язык в файле "de.txt".

Вот пример простого файла словаря:

JSON

{
        "documentViewer": {
                "fileLabel": {
                        "text": "File"
                },
                "viewLabel": {
                        "text": "View"
                },
                "toolsLabel": {
                        "text": "Tools"
                },
                "annotationsLabel": {
                        "text": "Annotations"
                },
                "uploadFileButton": {
                        "title": "Upload and open file"
                },
                "previousUploadFilesButton": {
                        "title": "Previously Uploaded Files"
                },
                "printImagesButton": {
                        "title": "Print images"
                },
                "downloadFileButton": {
                        "title": "Download image file"
                },
                ...
        }
}

3. Добавление кода JavaScript для локализации пользовательского интерфейса

Класс VintasoftLocalizationJS предоставляет функции для локализации DOM-элементов и константных строк.

Вот JavaScript-код, который демонстрирует, как включить локализацию веб просмотрщика документов в веб приложении:

JavaScript

/**
 Enables the localization of application UI.
*/
function __enableUiLocalization() {
    // if localizer is ready (localizer loaded localization dictionary)
    if (_localizer.get_IsReady()) {
        // localize DOM-elements of web page
        _localizer.localizeDocument();
    }
    // if localizer is NOT ready
    else
        // wait when localizer will be ready
        Vintasoft.Shared.subscribeToEvent(_localizer, "ready", function () {
            // localize DOM-elements of web page
            _localizer.localizeDocument();
        });

    // subscribe to the "dialogShown" event of document viewer
    Vintasoft.Shared.subscribeToEvent(_docViewer, "dialogShown", function (event, data) {
        _localizer.localizeDocument();
    });
}

Отправить отзыв