diff --git a/README.md b/README.md
index eeca73c..78f54b4 100644
--- a/README.md
+++ b/README.md
@@ -60,7 +60,8 @@ cp -r ../sprpcb-exportpdf-func/templates_reports ./mi_proyecto/templates/reports
 ### 5. Copiar los archivos necesarios para crear una nueva plantilla de reporte que contendrá los botones necesarios:
 ```shell
 cp -r ../sprpcb-exportpdf-func/reportes ./mi_proyecto/reportes
-cp -r ../sprpcb-exportpdf-func/templates_views_report-templates ./mi_proyecto/templates/views/report-templates
+cp ../sprpcb-exportpdf-func/templates_views_report-templates/export-pdf-report.htm ./mi_proyecto/templates/views/report-templates/
+cp ../sprpcb-exportpdf-func/media_js_reports/export-pdf-report.js ./mi_proyecto/media/js/reports/
 ```
 
 ### 6. Registrar la plantilla personalizada de proyecto que agrega los botones necesarios:
diff --git a/media_js_reports/export-pdf-report.js b/media_js_reports/export-pdf-report.js
new file mode 100644
index 0000000..8735fde
--- /dev/null
+++ b/media_js_reports/export-pdf-report.js
@@ -0,0 +1,35 @@
+define([
+    'knockout',
+    'viewmodels/report',
+    'templates/views/report-templates/export-pdf-report.htm'
+], function(ko, ReportViewModel, exportPdfReportTemplate) {
+    return ko.components.register('export-pdf-report', {
+        viewModel: function(params) {
+            params.configKeys = [];
+            var self = this;
+
+            ReportViewModel.apply(this, [params]);
+
+            //console.log('Params:', params);
+            this.anexarUbic = ko.observable(false);
+            this.anexarImagenes = ko.observable(false);            
+            this.anexarPdfs = ko.observable(false);
+            const boolToStr = (bool) => bool ? "1" : "0";
+
+            self.resourceId = ko.observable(
+                params.report?.report_json?.resourceinstanceid || null
+            );
+
+            self.exportPDF = function() {
+                var id = self.resourceId();
+                if (id) {
+                    var url = '/export/pdf/' + id + '/' + boolToStr(self.anexarUbic()) + '/' + boolToStr(self.anexarImagenes()) + '/' + boolToStr(self.anexarPdfs()) + '/';
+                    window.open(url, '_blank');
+                } else {
+                    alert('No se encontró el ID del recurso.');
+                }
+            };
+        },
+        template: exportPdfReportTemplate,
+    });
+});
diff --git a/templates_views_report-templates/default.htm b/templates_views_report-templates/default.htm
deleted file mode 100644
index c08065c..0000000
--- a/templates_views_report-templates/default.htm
+++ /dev/null
@@ -1,183 +0,0 @@
-{% load i18n %}
-<!-- ko if: !$data.configForm -->
-<!-- ko if: !$data.summary -->
-{% block report %}
-
-
-{% block report_title_bar %}
-<!-- Report Title Bar -->
-<div class="relative report-title-bar">
-
-    <!-- Title Block -->
-    <div class="report-toolbar-preview ep-form-toolbar">
-        <div class="h4 report-toolbar-title"><span data-bind="text: report.get('name')"></span> - <span data-bind="text: report.get('displayname') "></span></div>
-
-        <!-- Tools -->
-        <div class="ep-form-toolbar-tools mar-no flex">
-            <p class="report-print-date">
-                <span data-bind="text: $root.translations.reportDate"></span>
-                <span data-bind="text: reportDate"></span>
-            </p>
-
-            <div 
-                class="report-print-date" 
-                data-bind="component: { 
-                    name: 'views/components/simple-switch', 
-                    params: {
-                        value: hideEmptyNodes, 
-                        config:{ label: $root.translations.hideNullValues, subtitle: ''}
-                    }
-                }"
-            ></div>
-
-        </div>
-    </div>
-</div>
-{% endblock report_title_bar %}
-
-
-<!-- Report Content -->
-<div class="rp-report-container-preview">
-
-    {% block header %}
-    {% endblock header %}
-
-    {% block body %}
-    <!--ko if: hasProvisionalData() && (editorContext === false) -->
-    <div class="report-provisional-flag"><span data-bind="text: $root.translations.pendingProvisionalEditsNotDisplayed"></span></div>
-    <!--/ko-->
-    <!--ko if: hasProvisionalData() && (editorContext === true && report.userisreviewer === true) -->
-    <div class="report-provisional-flag"><span data-bind="text: $root.translations.pendingProvisionalEditsNotDisplayed"></span></div>
-    <!--/ko-->
-    <!--ko if: hasProvisionalData() && (editorContext === true && report.userisreviewer === false) -->
-    <div class="report-provisional-flag"><span data-bind="text: $root.translations.pendingProvisionalEdits"></div>
-    <!--/ko-->
-
-    <div class="rp-report-section relative rp-report-section-root">
-        <div class="rp-report-section-title">
-            <!-- ko foreach: { data: report.cards, as: 'card' } -->
-                <!-- ko if: ($parent.hideEmptyNodes() === false || card.tiles().length > 0) && ko.unwrap(card.model.visible) -->
-                <!-- ko if: $index() !== 0 --><hr class="rp-tile-separator"><!-- /ko -->
-                <div class="rp-card-section">
-                    <!-- ko component: {
-                        name: card.model.cardComponentLookup[card.model.component_id()].componentname,
-                        params: {
-                            state: 'report',
-                            preview: $parent.report.preview,
-                            card: card,
-                            pageVm: {...$root, report: $parent.report},
-                            hideEmptyNodes: $parent.hideEmptyNodes
-                        }
-                    } --> <!-- /ko -->
-                </div>
-                <!-- /ko -->
-            <!-- /ko -->
-        </div>
-    </div>
-    {% endblock body %}
-    
-    
-    {% block related_resources %}
-    <div class="rp-report-section relative report-related-resources">
-        <div class="rp-report-section-title">
-            <div class="h4 rp-section-title"><span data-bind="text: $root.translations.relatedResources"></span></div>
-        </div>
-        
-        <!-- ko foreach: { data: Object.values(report.relatedResourcesLookup()), as: 'resourceData' } -->
-        <!-- ko if: resourceData.totalRelatedResources > 0 || !$parent.hideEmptyNodes() -->
-        <div class="h5 rp-tile-title">
-            <span class="rp-tile-title-float" data-bind="text: resourceData.name"></span>
-        </div>
-
-        <div class="rp-card-section">
-            <!-- ko foreach: { data: resourceData.loadedRelatedResources(), as: 'relatedResource' } -->
-            <div class="rp-report-container-tile">
-                <div class="row rp-report-tile">
-                    <dl class="dl-horizontal">
-                        <dt><a data-bind="text: relatedResource.displayName, attr: {href: relatedResource.link}"></a></dt>
-                        <!-- ko if: relatedResource.relationship -->
-                        <dd data-bind="text: '( ' + relatedResource.relationship + ' )'"></dd>
-                        <!-- /ko -->
-                    </dl>
-                </div>
-            </div>
-            <!-- /ko -->
-
-            <!-- ko if: resourceData.paginator() && resourceData.paginator().has_next -->
-            <button class="btn btn-primary" data-bind="click: $parent.report.getRelatedResources.bind($parent.report, false)">
-                <span data-bind="text: $root.translations.loadMore" ></span>
-                <span data-bind="text: '(' + resourceData.remainingResources() + ')'"></span>
-            </button>
-
-            <button class="btn btn-primary" data-bind="click: $parent.report.getRelatedResources.bind($parent.report, true)">
-                <span data-bind="text: $root.translations.loadAll" ></span>
-                <span data-bind="text: '(' + (resourceData.totalRelatedResources - resourceData.loadedRelatedResources().length) + ')'"></span>
-            </button>
-            <!-- /ko -->
-                
-            <!--ko if: resourceData.totalRelatedResources === 0 -->	
-            <div class="rp-report-container-tile">	
-                <div class="row rp-report-tile rp-no-data"><span data-bind="text: $root.translations.noRelationshipsAdded"></span></div>	
-            </div>	
-            <!--/ko-->
-        </div>
-        <!-- /ko -->
-        <!-- /ko -->    
-    </div>  
-    {% endblock related_resources %}
-
-    {% block footer %}
-    {% endblock footer %}
-</div>
-{% endblock report %}
-<!-- /ko -->
-
-<!-- ko if: $data.summary -->
-{% block summary %}
-<div class="relative report-title-bar">
-
-    <!-- Title Block -->
-    <div class="report-toolbar-preview ep-form-toolbar">
-        <h4 class="report-toolbar-title"><span data-bind="text: report.get('name')"></span> - <span data-bind="text: report.get('displayname') "></span></h4>
-
-        <!-- Tools -->
-        <div class="ep-form-toolbar-tools mar-no flex">
-            <p class="report-print-date">
-                <span data-bind="text: $root.translations.reportDate"></span>
-                <span data-bind="text: reportDate"></span>
-            </p>
-        </div>
-    </div>
-</div>
-
-<div class="rp-report-container-preview">
-    <div class="rp-report-section relative rp-report-section-root">
-        <div class="rp-report-section-title">
-            <!-- ko if: report.cards.length > 0 -->
-                <!--ko let: { card: report.cards[0] }-->
-                <div class="rp-card-section">
-                    <!-- ko component: {
-                        name: card.model.cardComponentLookup[card.model.component_id()].componentname,
-                        params: {
-                        state: 'report',
-                        preview: report.preview,
-                        card: card,
-                        pageVm: $root
-                    }
-                    } --> <!-- /ko -->
-                </div>
-                <!--/ko-->
-            <!-- /ko -->
-        </div>
-    </div>
-</div>
-{% endblock summary %}
-<!-- /ko -->
-<!-- end of not configForm -->
-<!-- /ko -->
-
-
-<!-- ko if: $data.configForm && ($data.configType === 'header') -->
-{% block header_form %}
-{% endblock header_form %}
-<!-- /ko -->