Precios API de HTML a PDF Guardar como enlace PDF Ayuda
Cómo colocar un enlace "Guardar como PDF" en su área de miembros protegidos o
en su sitio de intranet local
Nuestro habitual Guardar como enlaces PDF están destinados a permitir que sus clientes conviertan rápidamente
sus páginas web en PDF agregando un enlace simple a sus páginas. Aunque es una solución muy rápida para la
mayoría de las situaciones, no funcionará en todas.
Por ejemplo cuando tienes una de las siguientes situaciones:
Sus páginas web están en una intranet local y no se puede acceder a ellas desde Internet normal
Sus páginas web están en un área segura para miembros y desea que los usuarios que hayan iniciado sesión
puedan guardar sus páginas como PDF
Desea mostrar un mensaje "en progreso" cuando se genera el PDF
Para todas estas situaciones puedes utilizar nuestro API con un poco de JavaScript simple que explicaremos a
continuación. Puedes verlo en acción cuando haces clic en el botón en la sección "Ejemplo de uso" a la derecha.
¿Cómo funciona?
Nuestro API de HTML a PDF Toma HTML como entrada y devuelve un PDF. Con el código JavaScript que aparece a
continuación, toma el HTML de la página web en la que se encuentra y lo envía a nuestra API. Luego, nuestra API
devolverá un PDF y JavaScript se lo mostrará al usuario.
Aquí está el código básico en JavaScript que debes vincular al hacer clic en tu botón. Puede hacer esto agregando
onclick="PDFmyURL()" a su botón o enlace para guardar como PDF, por ejemplo así:
<a href="#" onclick="PDFmyURL()" class="hide_me">Guarde esta página como PDF</a>
<script>
función PDFmyURL() {
// Reemplace esto con su licencia PDFmyURL: obtendrá una cuando se registre en h
var licencia = 'su clave de licencia';
// Primero tomamos el HTML de la página
var html = '', nodo = [Link];
mientras (nodo) {
cambiar ([Link]) {
caso Node.ELEMENT_NODE:
html += [Link];
romper; romper
caso Node.TEXT_NODE:
html += [Link];
romper; romper
caso Nodo.CDATA_SECTION_NODE:
html += '<![CDATA[' + [Link] + ']]>';
romper; romper
caso Node.COMMENT_NODE:
html += '<!--' + [Link] + '-->';
romper; romper
caso Nodo.DOCUMENT_TYPE_NODE:
// Los documentos (X)HTML se identifican mediante identi
html += "<!DOCTYPE " + [Link] + ([Link] ? ' PÚ
romper; romper
}
node = [Link];
}
// Ahora preparamos los datos que pasamos a la API
// Pasamos el html, nuestra licencia y CSS personalizado para ocultar el botón P
// Tenga en cuenta que no necesita pasar ningún otro parámetro si sus valores pr
var data = { html: html, licencia:licencia, css:'.hide_me{display:none;}'};
var serializado = [Link](datos).map(función(k) {
devuelve encodeURIComponent(k) + '=' + encodeURIComponent(data[k])
}).join('&')
// Puedes insertar un mensaje "en progreso" aquí
// Ahora preparamos la llamada API
xhttp = nueva XMLHttpRequest();
[Link] = función() {
var a;
if ([Link] === 4 && [Link] === 200) {
// El PDF ya está generado
// Puedes eliminar el mensaje "en progreso" aquí
// Ahora mostramos el PDF al usuario
var nombre de archivo = "[Link]";
if ([Link] && [Link]) {
[Link]([Link], nombre
} de lo contrario {
a = [Link]('a');
[Link] = [Link]([Link]);
[Link] = nombre de archivo;
[Link] = 'ninguno';
[Link](a);
[Link]();
}
}
};
// Esta es la llamada real a nuestra API
[Link]("POST", "[Link] verdadero);
[Link]('Tipo de contenido', 'aplicación/x-www-form-urlencoded');
[Link] = 'blob';
[Link](serializado);
}
</script>
¿Qué pasa si utilizamos una política de seguridad de contenido?
Si sus páginas utilizan a Política de seguridad de contenidos entonces, por lo general, XMLHttpRequests solo se
permitirá en el mismo dominio que el suyo. Esto significa que recibirás un error cuando uses el código de ejemplo
anterior.
Si desea poder llamar a nuestra API como en el ejemplo, deberá agregarla como directiva connect-src. Puedes hacer
esto con una declaración como esta:
Política de seguridad de contenido: connect-src 'self' [Link]
Si las políticas de su empresa no lo permiten, podría crear un script del lado del servidor que llame a nuestra API.
Luego, publicaría en ese lugar en lugar de en [Link] Esto hace que la llamada XMLHttpRequest
sea del mismo dominio y no infringiría la Política de seguridad de contenido.
Un escenario más elaborado si tus recursos están aún más protegidos
En algunas situaciones descubriremos que simplemente enviar el HTML simple no es suficiente. Esto puede ocurrir
cuando los recursos de su página TAMPOCO son accesibles desde Internet y usted no lo hizo en línea ellos.
En ese caso, puedes utilizar parte de nuestro JavaScript que incorpora los recursos por ti.
A continuación explicamos nuestro propio JavaScript, donde:
1. Asegúrese de que tomemos TODO HTML en lugar de solo el HTML del primer ejemplo
2. Tome las hojas de estilo de la página y asegúrese de vincularlas a la URL absoluta en lugar de a la URL
relativa
3. Tome las imágenes de la página y páselas como datos en lugar de como URL
4. Utilice BootStrap y JQuery para mostrar un mensaje "en progreso"
Aquí está el ejemplo con algunos comentarios. Please Envíanos un correo electrónico si necesita más ayuda para
implementar esto.
<script>
// En este ejemplo mostramos todo para que puedas copiar/pegar si tienes jQuery y BootSt
//jQuery se carga ahora, ahora espere a que se cargue el DOM
$(documento).ready(función() {
$('#pdfbutton').click(función(e) {
[Link]();
// El siguiente código ahora está vinculado al botón PDF
// ahora reemplazamos las hojas de estilo con su versión URL absoluta
var elementos = [Link]('link[rel=stylesheet]');
for(var i=0;i<[Link];i++){
var head = [Link];
var link = [Link]("link");
[Link] = "texto/css";
[Link] = "hoja de estilo";
[Link] = elementos[i].href;
[Link](enlace);
elementos[i].[Link](elementos[i]);
}
// Convirtamos todas las imágenes en datos para que no sea necesario des
función setBase64Image(img) {
var canvas = [Link]("canvas");
[Link] = [Link];
[Link] = [Link];
var ctx = [Link]("2d");
[Link](img, 0, 0);
var dataURL = [Link]("imagen/png");
[Link] = URL de datos;
var imágenes = [Link]("img");
si (imá[Link] > 0) {
para (var j=0; j<[Link]; j++ ) {
setBase64Image(imágenes[j]);
}
}
// ahora tomaremos TODO HTML, incluido el tipo de documento
var html = '', nodo = [Link];
mientras (nodo) {
cambiar ([Link]) {
caso Node.ELEMENT_NODE:
html += [Link];
romper; romper
caso Node.TEXT_NODE:
html += [Link];
romper; romper
caso Nodo.CDATA_SECTION_NODE:
html += '<![CDATA[' + [Link] + ']]>';
romper; romper
caso Node.COMMENT_NODE:
html += '<!--' + [Link] + '-->';
romper; romper
caso Nodo.DOCUMENT_TYPE_NODE:
// Los documentos (X)HTML se identifican mediant
html += "<!DOCTYPE " + [Link] + ([Link]
romper; romper
}
node = [Link];
}
var data = { html: html, licencia: 'yourlicensekey' };
// Puedes pasar todos los parámetros que quieras si quieres, pero no es
// mostraremos un mensaje en progreso con un modal BootStrap
$('#inProgress').modal('mostrar');
xhttp = nueva XMLHttpRequest();
[Link] = función() {
var a;
if ([Link] === 4 && [Link] === 200) {
// el PDF está listo por lo que eliminamos el mensaje en
$('#inProgress').modal('ocultar');
// y mostrar el PDF
var nombre de archivo = "[Link]";
if ([Link] && [Link]
[Link]([Link]
} de lo contrario {
a = [Link]('a');
[Link] = [Link]([Link]
[Link] = nombre de archivo;
[Link] = 'ninguno';
[Link](a);
[Link]();
}
}
};
[Link]("POST", "[Link] verdadero);
[Link]('Tipo de contenido', 'aplicación/x-www-form-urlen
[Link] = 'blob';
[Link]($.param( datos ));
});
});
</script>
Términos y condiciones Política de privacidad Acuerdo de licencia Planes y precios Preguntas frecuentes Contáctenos Iniciar sesión