If you really need your PDF’s inside BSS you can convert the PDF to a base64 string
Keep in mind that JSON files are typically used for structured data and may not be the most efficient way to store binary data like a PDF blob. However, if your use case requires it, you can encode the blob data as a base64 string and include it in a JSON object.
nodeJS example
how to convert pdf to base64 string and store it in a json file
folder structure
mypdfs/
|-- pdfs/
| |-- example1.pdf
| |-- example2.pdf
| |-- example3.pdf
|-- jsons/
|-- index.js
open mypdfs folder in VS code
in your terminal in the mypdfs folder run
npm install pdf-parse
create index.js
const fs = require('fs');
const path = require('path');
const pdf = require('pdf-parse');
const pdfsFolder = 'pdfs';
const jsonsFolder = 'jsons';
// Get a list of PDF files in the folder
const pdfFiles = fs.readdirSync(pdfsFolder).filter((file) => file.toLowerCase().endsWith('.pdf'));
// Array to store the list of PDF file names
const pdfFileList = [];
pdfFiles.forEach(async (pdfFileName) => {
const pdfFilePath = path.join(pdfsFolder, pdfFileName);
// Convert PDF file name to JSON file name
const jsonFileName = path.basename(pdfFileName, '.pdf') + '.json';
// Add PDF file name to the list
pdfFileList.push({ fileName: `assets/js/${jsonFileName}` });
// Read the PDF file
fs.readFile(pdfFilePath, async (err, data) => {
if (err) {
console.error(`Error reading PDF file ${pdfFileName}:`, err);
return;
}
// Convert PDF data to base64
const base64String = Buffer.from(data).toString('base64');
// Create a JSON object with the file name and the base64 string
const jsonObject = {
fileName: path.basename(pdfFileName, '.pdf'), // Remove '.pdf' extension
pdfData: base64String,
};
// Save the JSON object to a file without '.pdf' extension
const jsonFilePath = path.join(jsonsFolder, jsonFileName);
fs.writeFile(jsonFilePath, JSON.stringify(jsonObject, null, 2), (err) => {
if (err) {
console.error(`Error writing JSON file for ${pdfFileName}:`, err);
} else {
console.log(`PDF content saved as base64 in ${jsonFilePath}`);
}
});
});
});
// Save the list of PDF file names to list.json
const listJsonFilePath = path.join(jsonsFolder, 'list.json');
fs.writeFile(listJsonFilePath, JSON.stringify(pdfFileList, null, 2), (err) => {
if (err) {
console.error('Error writing list.json file:', err);
} else {
console.log(`List of PDF file names saved in ${listJsonFilePath}`);
}
});
in the terminal run
node index.js
In BSS import all jsons from the jsons folder
You can use the jsons like this in BSS
HTML
<div class="container">
<div class="row">
<div class="col">
<select id="pdfSelect" class="form-select"></select>
<div class="ratio ratio-16x9">
<iframe id="pdfIframe"></iframe>
</div>
</div>
</div>
</div>
javascript
async function fetchPdfList() {
const response = await fetch('assets/js/list.json');
return response.json();
}
// Function to fetch the selected PDF data
async function fetchPdfData(fileName) {
const response = await fetch(fileName);
return response.json();
}
// Function to populate the dropdown with PDF file names
async function populateDropdown() {
const pdfList = await fetchPdfList();
const pdfSelect = document.getElementById('pdfSelect');
pdfList.forEach(item => {
const option = document.createElement('option');
option.value = item.fileName;
option.text = item.fileName;
pdfSelect.add(option);
});
}
// Function to load the selected PDF in an iframe
async function loadSelectedPdf() {
const pdfSelect = document.getElementById('pdfSelect');
const selectedFileName = pdfSelect.value;
if (!selectedFileName) {
console.error('Please select a PDF file.');
return;
}
const pdfIframe = document.getElementById('pdfIframe');
const pdfData = await fetchPdfData(selectedFileName);
pdfIframe.src = `data:application/pdf;base64,${pdfData.pdfData}`;
}
// Populate dropdown on page load
populateDropdown();
const pdfJson = document.getElementById('pdfSelect')
pdfJson.addEventListener('change', () => loadSelectedPdf())
Keep in mind that base64 encoding increases the size of the data, so it may not be suitable for large files. If possible, consider storing binary data like PDFs separately from JSON, perhaps using a database or a dedicated file storage system.
here is an example