Comment afficher l'aperçu personnalisé/paginé (avec des boîtes de page) en utilisant Javascript et CSS?

Je dois afficher un aperçu avant impression (défilable sur une seule page) du contenu HTML.Comment afficher l'aperçu personnalisé/paginé (avec des boîtes de page) en utilisant Javascript et CSS?

Veuillez lire attentivement ce qui suit et me suggérer la solution pour le même.

L'entrée sera une données brutes dynamique (contenu peut être énorme), Peut-on appliquer une norme CSS personnalisée ou javascript et afficher l'aperçu avant impression du contenu dans le page.T * il Aperçu avant impression devrait avoir des marges (espaces) de tous les côtés et devrait ressembler à ce que le contenu soit placé dans des boîtes de page. *

Supposons que les données brutes a 200 lignes, l'aperçu avant impression va afficher 50 lignes/page

Maintenant, la première page en aperçu avant impression aura 50 lignes et lorsque l'utilisateur fait défiler la page, la deuxième page sera affichée avec la ligne de 51-100 et ainsi de suite. En d'autres termes, l'espace marge, la hauteur et la largeur de la page est fixée et les résultats devraient être comme des textes imprimés sur un papier, pas comme une page Web.

Merci à l'avance, Chandra

Source

2010-11-22 user516542

Cela va être impossible ou vraiment, vraiment difficile à réaliser, car il n'y a pas native, la fonctionnalité de zoom multi-navigateur qui pourrait vous aider à atteindre cet objectif.

De plus, les informations nécessaires (telles que la taille et les marges de la page de l'imprimante) ne sont pas accessibles depuis le navigateur.

Je voudrais que les utilisateurs utilisent l'aperçu d'impression intégré du navigateur à la place.

Source

2010-11-22 19:30:30

Je voudrais ajouter une chose à ce sujet, en supposant que la hauteur de la page et la largeur de la page, les espaces de marge sont codés en dur. Il n'est pas nécessaire d'apporter de l'imprimante. Seul le nombre de pages doit être dynamique en fonction du volume du contenu. – user516542

@user Je ne pense pas que ça va marcher même alors. Les moyens techniques ne sont tout simplement pas là. L'aperçu avant impression intégré du navigateur est vraiment la voie à suivre –

L'objectif principal est, l'utilisateur doit sentir l'apparence réelle du contenu imprimé dans un document. Alignements de page et de briser le contenu dans les pages montrent à l'utilisateur avec la sensation réelle de l'aperçu avant impression est le but. – user516542

Je ne sais pas si je comprends bien votre question, mais:

Je suppose que vous pouvez créer une page avec l'aide de la marge et le rembourrage et la hauteur de ligne à modifier le contenu de la page. Aussi, vous liez un fichier CSS avec media="print", <link rel="stylesheet" type="text/css" media="print" href="foo.css">

Ensuite, vous faites plusieurs aperçu avant impression de votre navigateur pour tester l'apparence. Lorsque tout va bien, vous pouvez ajouter un iframe dans votre page d'aperçu qui lient la page d'impression.

Source

2010-11-22 19:36:44 Sotiris

Il n'y a aucun moyen de prédire avec précision ce que le navigateur fera quand il imprime la page sur une vraie imprimante. Vous ne savez pas (par exemple) si un utilisateur a du papier A4 ou US Letter dans l'imprimante! – Pointy

Peut mentionner pour quelle taille de page est l'aperçu, ou faire plusieurs aperçus pour les tailles de page les plus populaires. – Sotiris

Supposons que la hauteur de la page et la largeur de la page, les espaces de marge sont codés en dur. Il n'est pas nécessaire d'apporter de l'imprimante. Seul le nombre de pages doit être dynamique en fonction du volume du contenu – user516542

Si cela ne doit pas nécessairement être un aperçu 'vrai', mais donnez simplement à l'utilisateur une idée de ce à quoi ressemblera la page imprimée, vous pouvez utiliser une feuille de style imprimée.

Je pense que cet article peut être un bon guide: http://css-tricks.com/css-tricks-finally-gets-a-print-stylesheet/

une fois que vous avez fait votre impression stylesheet, vous pouvez simplement utiliser jquery pour changer votre feuille de style sur le contenu HTML en appuyant simplement sur un bouton.

Source

2010-11-22 19:37:13

Imprimer la feuille de style peut être la solution, si cela peut donner une idée réelle des alignements de pages car elles seront imprimées dans un papier (avec toutes les configurations de marge). Comme je l'ai mentionné, le contenu sera dynamique, seul le CSS/Javascript peut décider des alignements. Aucun changement d'alignement codé en dur ne peut être effectué dans les fichiers HTML. Veuillez suggérer. – user516542

J'ai édité la réponse, avec cette technique, vous pouvez modifier l'apparence du code HTML en utilisant css. J'espère que ça aide. –

Comment afficher l'aperçu personnalisé/paginé (avec des boîtes de page) en utilisant Javascript et CSS?

Répondre

Questions connexes