/* Scoped CSS para WordPress */
.pdf-to-word-container {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
max-width: 100%;
margin: 0 auto;
background: #f8f8fb;
min-height: 100vh;
padding: 0;
box-sizing: border-box;
}
.pdf-to-word-container * {
box-sizing: border-box;
}
/* Header */
.ptw-header {
background: #fff;
border-bottom: 1px solid #e0e0e0;
padding: 15px 0;
position: sticky;
top: 0;
z-index: 100;
}
.ptw-header-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 15px;
}
.ptw-logo {
font-size: 28px;
font-weight: bold;
color: #e53935;
text-decoration: none;
display: flex;
align-items: center;
gap: 5px;
}
.ptw-logo span {
color: #333;
}
.ptw-nav {
display: flex;
gap: 25px;
flex-wrap: wrap;
}
.ptw-nav a {
text-decoration: none;
color: #333;
font-weight: 500;
font-size: 14px;
transition: color 0.3s;
cursor: pointer;
}
.ptw-nav a:hover {
color: #e53935;
}
.ptw-auth-buttons {
display: flex;
gap: 10px;
align-items: center;
}
.ptw-btn {
padding: 8px 20px;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
cursor: pointer;
transition: all 0.3s;
border: none;
font-size: 14px;
}
.ptw-btn-outline {
background: transparent;
color: #333;
border: 1px solid transparent;
}
.ptw-btn-outline:hover {
background: #f5f5f5;
}
.ptw-btn-primary {
background: #e53935;
color: white;
}
.ptw-btn-primary:hover {
background: #c62828;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(229, 57, 53, 0.3);
}
.ptw-menu-icon {
display: none;
font-size: 24px;
cursor: pointer;
color: #333;
}
/* Main Content */
.ptw-main {
max-width: 900px;
margin: 0 auto;
padding: 60px 20px;
text-align: center;
}
.ptw-title {
font-size: 48px;
color: #333;
margin: 0 0 15px 0;
font-weight: 700;
line-height: 1.2;
}
.ptw-subtitle {
font-size: 24px;
color: #555;
margin: 0 0 10px 0;
font-weight: 400;
}
.ptw-tech {
font-size: 16px;
color: #777;
margin-bottom: 40px;
}
.ptw-tech a {
color: #e53935;
text-decoration: none;
}
/* Upload Area */
.ptw-upload-container {
position: relative;
margin: 40px auto;
max-width: 500px;
}
.ptw-upload-area {
background: #e53935;
color: white;
padding: 40px 60px;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s;
position: relative;
overflow: hidden;
box-shadow: 0 4px 15px rgba(229, 57, 53, 0.3);
}
.ptw-upload-area:hover {
background: #d32f2f;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(229, 57, 53, 0.4);
}
.ptw-upload-area.dragover {
background: #c62828;
transform: scale(1.02);
}
.ptw-upload-text {
font-size: 28px;
font-weight: 600;
margin: 0;
pointer-events: none;
}
.ptw-cloud-icons {
position: absolute;
right: -60px;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 10px;
}
.ptw-cloud-btn {
width: 45px;
height: 45px;
border-radius: 50%;
background: white;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
font-size: 20px;
}
.ptw-cloud-btn:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.ptw-drop-text {
margin-top: 20px;
color: #666;
font-size: 16px;
}
.ptw-file-input {
display: none;
}
/* Progress */
.ptw-progress {
display: none;
margin: 30px auto;
max-width: 500px;
text-align: center;
}
.ptw-progress-bar {
width: 100%;
height: 8px;
background: #e0e0e0;
border-radius: 4px;
overflow: hidden;
margin-bottom: 15px;
}
.ptw-progress-fill {
height: 100%;
background: #e53935;
width: 0%;
transition: width 0.3s;
}
.ptw-progress-text {
color: #555;
font-size: 16px;
}
/* Download Section */
.ptw-download {
display: none;
margin: 30px auto;
max-width: 500px;
}
.ptw-download-btn {
background: #43a047;
color: white;
padding: 20px 40px;
font-size: 20px;
border: none;
border-radius: 8px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.ptw-download-btn:hover {
background: #388e3c;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(67, 160, 71, 0.3);
}
/* Features */
.ptw-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 60px;
text-align: left;
}
.ptw-feature {
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.ptw-feature h3 {
color: #e53935;
margin: 0 0 10px 0;
font-size: 20px;
}
.ptw-feature p {
color: #666;
margin: 0;
line-height: 1.6;
}
/* Footer */
.ptw-footer {
background: white;
border-top: 1px solid #e0e0e0;
padding: 30px 20px;
text-align: center;
color: #666;
font-size: 14px;
margin-top: 60px;
}
/* Ad Banner */
.ptw-ad-banner {
max-width: 900px;
margin: 40px auto;
padding: 0 20px;
}
.ptw-ad-placeholder {
background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
border: 2px dashed #90caf9;
border-radius: 8px;
padding: 40px;
text-align: center;
color: #555;
}
/* Responsive */
@media (max-width: 768px) {
.ptw-title {
font-size: 32px;
}
.ptw-subtitle {
font-size: 18px;
}
.ptw-nav {
display: none;
}
.ptw-menu-icon {
display: block;
}
.ptw-upload-text {
font-size: 22px;
}
.ptw-upload-area {
padding: 30px 40px;
}
.ptw-cloud-icons {
display: none;
}
.ptw-features {
grid-template-columns: 1fr;
}
.ptw-header-content {
justify-content: center;
}
}
@media (max-width: 480px) {
.ptw-title {
font-size: 28px;
}
.ptw-upload-area {
padding: 25px 30px;
}
.ptw-upload-text {
font-size: 20px;
}
}
/* Loading Spinner */
.ptw-spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(255,255,255,.3);
border-radius: 50%;
border-top-color: white;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Error Message */
.ptw-error {
background: #ffebee;
color: #c62828;
padding: 15px;
border-radius: 5px;
margin: 20px auto;
max-width: 500px;
display: none;
border-left: 4px solid #c62828;
}
/* Success Message */
.ptw-success {
background: #e8f5e9;
color: #2e7d32;
padding: 15px;
border-radius: 5px;
margin: 20px auto;
max-width: 500px;
display: none;
border-left: 4px solid #2e7d32;
}
Convierte PDF a WORD
Convierte tus PDF a WORD con una precisión increíble.
Con la tecnología de Solid Documents.
Seleccionar archivo PDF
o arrastra y suelta el PDF aquí
Convirtiendo...
🎯 Alta Precisión
Mantenemos el formato original de tu documento PDF al convertirlo a Word.
🔒 Seguro
Tus archivos se procesan de forma segura y se eliminan automáticamente.
⚡ Rápido
Conversión rápida y eficiente sin necesidad de instalar software.
// Configurar PDF.js worker
pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
// Variables globales
let currentFile = null;
let convertedDoc = null;
// Elementos del DOM
const uploadArea = document.getElementById('uploadArea');
const fileInput = document.getElementById('fileInput');
const progressArea = document.getElementById('progressArea');
const progressFill = document.getElementById('progressFill');
const progressText = document.getElementById('progressText');
const downloadArea = document.getElementById('downloadArea');
const errorMessage = document.getElementById('errorMessage');
const successMessage = document.getElementById('successMessage');
// Event Listeners
uploadArea.addEventListener('click', () => fileInput.click());
uploadArea.addEventListener('dragover', (e) => {
e.preventDefault();
uploadArea.classList.add('dragover');
});
uploadArea.addEventListener('dragleave', () => {
uploadArea.classList.remove('dragover');
});
uploadArea.addEventListener('drop', (e) => {
e.preventDefault();
uploadArea.classList.remove('dragover');
const files = e.dataTransfer.files;
if (files.length > 0 && files[0].type === 'application/pdf') {
handleFile(files[0]);
} else {
showError('Por favor, selecciona un archivo PDF válido');
}
});
fileInput.addEventListener('change', (e) => {
if (e.target.files.length > 0) {
handleFile(e.target.files[0]);
}
});
// Funciones principales
function handleFile(file) {
if (file.type !== 'application/pdf') {
showError('El archivo debe ser un PDF');
return;
}
if (file.size > 50 * 1024 * 1024) { // 50MB limit
showError('El archivo es demasiado grande. Máximo 50MB');
return;
}
currentFile = file;
hideMessages();
convertPDFToWord(file);
}
async function convertPDFToWord(file) {
try {
showProgress(0);
progressArea.style.display = 'block';
downloadArea.style.display = 'none';
// Leer el archivo
const arrayBuffer = await file.arrayBuffer();
showProgress(20);
// Cargar PDF
const pdf = await pdfjsLib.getDocument({ data: arrayBuffer }).promise;
const numPages = pdf.numPages;
let fullText = '';
let paragraphs = [];
// Extraer texto de cada página
for (let i = 1; i item.str).join(' ');
if (pageText.trim()) {
paragraphs.push({
text: pageText,
page: i
});
}
showProgress(20 + (i / numPages) * 40);
}
showProgress(70);
// Crear documento Word
const { Document, Packer, Paragraph, TextRun, HeadingLevel } = docx;
const children = [];
// Agregar título
children.push(
new Paragraph({
text: `Documento convertido de: ${file.name}`,
heading: HeadingLevel.TITLE,
spacing: { after: 400 }
})
);
// Agregar contenido
paragraphs.forEach((para, index) => {
children.push(
new Paragraph({
children: [
new TextRun({
text: para.text,
size: 24, // 12pt
font: "Arial"
})
],
spacing: { after: 200 }
})
);
});
const doc = new Document({
sections: [{
properties: {},
children: children
}]
});
showProgress(90);
// Generar blob
const blob = await Packer.toBlob(doc);
convertedDoc = blob;
showProgress(100);
// Mostrar botón de descarga
setTimeout(() => {
progressArea.style.display = 'none';
downloadArea.style.display = 'block';
showSuccess('¡Conversión completada exitosamente!');
}, 500);
} catch (error) {
console.error('Error en conversión:', error);
showError('Error al convertir el archivo. Inténtalo de nuevo.');
progressArea.style.display = 'none';
}
}
function downloadWord() {
if (convertedDoc) {
const fileName = currentFile.name.replace('.pdf', '.docx');
saveAs(convertedDoc, fileName);
showSuccess('Archivo descargado correctamente');
}
}
// Funciones de utilidad
function showProgress(percent) {
progressFill.style.width = percent + '%';
progressText.textContent = `Convirtiendo... ${Math.round(percent)}%`;
}
function showError(message) {
errorMessage.textContent = message;
errorMessage.style.display = 'block';
successMessage.style.display = 'none';
setTimeout(() => {
errorMessage.style.display = 'none';
}, 5000);
}
function showSuccess(message) {
successMessage.textContent = message;
successMessage.style.display = 'block';
errorMessage.style.display = 'none';
setTimeout(() => {
successMessage.style.display = 'none';
}, 5000);
}
function hideMessages() {
errorMessage.style.display = 'none';
successMessage.style.display = 'none';
}
function selectFromGoogleDrive() {
alert('Función de Google Drive - Aquí se integraría la API de Google Drive');
// Implementación real requeriría OAuth2 y Google Drive API
}
function selectFromDropbox() {
alert('Función de Dropbox - Aquí se integraría la API de Dropbox');
// Implementación real requeriría Dropbox Chooser API
}
// Prevenir comportamientos por defecto en drag and drop
document.addEventListener('dragover', (e) => {
if (e.target.closest('.pdf-to-word-container')) {
e.preventDefault();
}
});
document.addEventListener('drop', (e) => {
if (e.target.closest('.pdf-to-word-container')) {
e.preventDefault();
}
});
Deja un comentario