БЛОГ НА HUSL


Добавление каринки(png) в docx файл на HTML

Автор вопроса: AriaMinor

QQ all, у меня возникла дикая проблема: на сайт мне нужно добавить страницу на кторой на документ можно будет наложить ватермарку компании, я чет попытался сделать но ничего не вышло, я даж через ИИ код прогнал но и они бессильны, был бы рад если бы кто-нибудь дал пример как это можно реализовать. Ниже код который я "настрочил"(Там ужас происхдит т.к. chatGPT после того как я его поросил посмотреть код внес свои правки но просто "испортил" некоторые МОИ строчки. НА НЕГО НЕ ОПИРАЙТЕСЬ ПРОСТО КАК ПРИМЕР)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>File Upload and Processing</title>
    <style>
        #progress-bar {
            width: 100%;
            background-color: #f3f3f3;
        }
        #progress-bar div {
            width: 0;
            height: 30px;
            background-color: #4caf50;
        }
        #console {
            border: 1px solid #ccc;
            padding: 10px;
            height: 200px;
            overflow-y: scroll;
        }
    </style>
</head>
<body>
    <h1>Upload and Process .docx File</h1>
    <input type="file" id="file-input" accept=".docx">
    <button onclick="processFile()">Upload and Process</button>
    <div id="progress-bar"><div></div></div>
    <div id="console"></div>
    <a id="download-link" style="display:none;">Download Processed File</a>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.7.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/docxtemplater/3.21.0/docxtemplater.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pizzip/3.0.6/pizzip.min.js"></script>
    <script>
        function logToConsole(message) {
            const consoleDiv = document.getElementById('console');
            consoleDiv.innerHTML += message + '<br>';
            consoleDiv.scrollTop = consoleDiv.scrollHeight;
        }

        function updateProgressBar(percentage) {
            const progressBar = document.getElementById('progress-bar').firstElementChild;
            progressBar.style.width = percentage + '%';
        }

        async function processFile() {
            const fileInput = document.getElementById('file-input');
            if (fileInput.files.length === 0) {
                logToConsole('No file selected.');
                return;
            }

            const file = fileInput.files[0];
            logToConsole('File selected: ' + file.name);

            const reader = new FileReader();
            reader.onload = async function(event) {
                const content = event.target.result;
                const zip = new PizZip(content);
                const doc = new window.docxtemplater(zip);

                logToConsole('Processing file...');
                updateProgressBar(50);

                // Add image to each page (this is a simplified example)
                const imageBase64 = await fetch('lol.png').then(res => res.blob()).then(blob => new Promise((resolve, reject) => {
                    const reader = new FileReader();
                    reader.onloadend = () => resolve(reader.result.split(',')[1]);
                    reader.onerror = reject;
                    reader.readAsDataURL(blob);
                }));

                doc.getFullText().split('\n').forEach((_, index) => {
                    doc.setData({ [`image${index}`]: imageBase64 });
                });

                doc.render();

                const out = doc.getZip().generate({
                    type: 'blob',
                    mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
                });

                const downloadLink = document.getElementById('download-link');
                downloadLink.href = URL.createObjectURL(out);
                downloadLink.download = 'processed_' + file.name;
                downloadLink.style.display = 'block';

                logToConsole('File processed successfully.');
                updateProgressBar(100);
            };

            reader.readAsBinaryString(file);
        }
    </script>
</body>
</html>

Источник

Ответы (0 шт):

licensed under cc by-sa 3.0 with attribution.