Программа просмотра pdf-файлов oracle apex

Я новичок в Oracle-Apex. Мне нужна помощь, чтобы показать PDF-файл в Oracle APEX. У меня вопрос: я загрузил PDF-файл в базу данных. Я сохраняю PDF-файл в виде капли в базе данных. После этого я показал имя PDF-файла в классическом отчете. Когда я нажимаю на имя, я хочу увидеть предварительный просмотр загруженного мной PDF-файла. Теперь я ищу способ показать PDF-файл с кодом. Кто-нибудь может помочь?

Мне нужна предыдущая и следующая кнопки.

Как я могу показать этот PDF-файл в регионе? вот моя страница

1
0
3 858
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вот пример, который я быстро придумал, используя APEX_APPLICATION_TEMP_FILES. Надеюсь, это то, чего вы пытаетесь достичь. https://apex.oracle.com/pls/apex/f?p=34781

Username: demo
Password: demo

Здесь используется проект PDF.js от Mozilla. Вот краткий рецепт того, что вам может понадобиться.

  1. Создайте элемент страницы File Browse и установите Тип хранилища на Table APEX_APPLICATION_TEMP_FILES.
  2. Создайте кнопку страницы для отправки страницы.
  3. Создайте область классического отчета и введите следующий запрос:

    select
        id
        , filename
    from apex_application_temp_files
    where application_id = :APP_ID
    
  4. Добавьте виртуальный столбец и установите выражение HTML:

    <button type="button" class="btn-preview-pdf" data-id="#ID#">Preview</button>
    
  5. Создайте регион и введите в Источник следующее:

    <canvas id="preview-pane"></canvas> 
    
  6. Создайте динамическое действие Click.

    а. Установите тип выбора jQuery Selector.

    б. Войдите в jQuery Selector .btn-preview-pdf.

  7. Добавьте действие Execute JavaScript Code со следующим кодом JS (подробнее о том, что делает код, см. Примеры на веб-сайте PDF.js):

    var fileId = $(this.triggeringElement).data('id');
    var docUrl = 'f?p=&APP_ID.:0:&APP_SESSION.:APPLICATION_PROCESS=DOWNLOADPDF:::FILE_ID:' + fileId;
    var previewPane = this.affectedElements[0];
    
    // from PDF.js examples
    pdfjsLib.getDocument(docUrl).then(function(pdf) {
        var pageNumber = 1;
        pdf.getPage(pageNumber).then(function(page) {
            console.log('Page loaded');
    
            var scale = 1.5;
            var viewport = page.getViewport(scale);
    
            // Prepare canvas using PDF page dimensions
            var canvas = previewPane;
            var context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;
    
            // Render PDF page into canvas context
            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };
            var renderTask = page.render(renderContext);
            renderTask.then(function () {
                console.log('Page rendered');
            });
        })
    }, function(reason) {
        console.error(reason);
    });
    
  8. Для действия также установите Затронутые элементы:

    а. Тип выбора: jQuery Selector

    б. Селектор jQuery: #preview-pane

  9. Следуйте инструкциям Джоэла Каллмана Почта по созданию ссылки для загрузки файла. Вам понадобится процесс приложения (DOWNLOADPDF) и элемент приложения (FILE_ID). Измененный код процесса приложения DOWNLOADPDF выглядит следующим образом:

    begin
        for file in (select *
                    from apex_application_temp_files
                    where id = :FILE_ID) loop
            --
            sys.htp.init;
            sys.owa_util.mime_header( file.mime_type, FALSE );
            sys.htp.p('Content-length: ' || sys.dbms_lob.getlength( file.blob_content));
            sys.htp.p('Content-Disposition: attachment; filename="' || file.filename || '"' );
            sys.htp.p('Cache-Control: max-age=3600');  -- tell the browser to cache for one hour, adjust as necessary
            sys.owa_util.http_header_close;
            sys.wpg_docload.download_file( file.blob_content );
    
            apex_application.stop_apex_engine;
        end loop;
    end;
    
  10. Почти пропустил это. В атрибутах страницы установите URL-адреса файлов JavaScript на любой из CDN перечисленные. Например:

    //cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.550/pdf.min.js

Обратите внимание, что это очень простой прототип. Предварительный просмотр позволяет просматривать только первую страницу. Вам нужно будет выяснить API, а затем сделать все необходимое, чтобы разрешить многостраничный просмотр. Я предоставлю вам разобраться в этом.

Так и должно быть. Сообщите мне, если это не сработает для вас.

Это работает! Спасибо, чувак, ты спас мне жизнь. Как перейти на многостраничный просмотр?

canberkcelik 28.10.2018 12:30

Я обновил демонстрацию, чтобы показать разбивку на страницы. Это грубое решение. Я обновлю пост в другой раз с подробностями. А пока обратите внимание на новые кнопки и JavaScript. Как уже упоминалось, уловка заключается в функции рендеринга страницы и параметре номера страницы, который она принимает. Вам будет полезно подумать о том, как использовать это самостоятельно.

Adrian P 28.10.2018 23:26

Я видел Демо. Это круто. Мне нужен только Prev. и следующая кнопка. Вы можете прислать мне детали? Спасибо

canberkcelik 29.10.2018 08:39

Не могли бы вы поделиться кодом следующей и предыдущей кнопок, пожалуйста, @Adrian P

canberkcelik 15.11.2018 13:12

Другие вопросы по теме