Exporting Many Files to Single PDF
Our sample projects and report templates can help you learn the basics of working with our products.Render the report in Vue 3 and export it directly from code, without opening the viewer.
Exporting the document. Load and render the report, configure the requested export format, and deliver the generated bytes as a file, stream, or web response.
Exporting the document. Load and render the report, configure the requested export format, and deliver the generated bytes as a file, stream, or web response.
<script setup lang="ts">
import { ref } from 'vue';
import { Stimulsoft } from 'stimulsoft-reports-js-vuejs';
const isLoading = ref(false);
async function exportPdf() {
var report = new Stimulsoft.Report.StiReport();
report.renderedPages.clear();
report.reportUnit = Stimulsoft.Report.StiReportUnitType.HundredthsOfInch;
var tempReport = new Stimulsoft.Report.StiReport();
for (var index = 0; index < 6; index++) {
tempReport.loadDocumentFile('Reports/MasterDetailSubdetail.mdc');
for (var page of tempReport.renderedPages.list) {
page.report = tempReport;
page.guid = Stimulsoft.System.Guid.newGuidString();
report.renderedPages.add(page);
}
}
var pdfData = await report.exportDocumentAsync2(Stimulsoft.Report.StiExportFormat.Pdf);
Stimulsoft.System.StiObject.saveAs(pdfData, report.reportAlias + '.pdf', 'application/pdf');
}
const handleClick = () => {
isLoading.value = true;
setTimeout(async () => {
await exportPdf();
isLoading.value = false;
}, 0);
};
</script>
<template>
<div class="container">
<h4>This sample demonstrates how to export a report to a PDF file and save it:</h4>
<div class="container-button">
<button @click="handleClick" :disabled="isLoading" class="button" title="Export Report to PDF File">
{{ isLoading ? 'Please, wait...' : 'Export to PDF' }}
</button>
</div>
</div>
</template>renderedPages are re-parented and added to one report; exportDocumentAsync2(StiExportFormat.Pdf) then produces a single PDF, saved to disk with StiObject.saveAs.