installation du composant d'imprimante javascript

Avec le développement d'Internet, de plus en plus de pages Web doivent prendre en charge les fonctions d'impression. Le composant d'imprimante JavaScript est un très excellent outil qui peut nous aider à imprimer rapidement des pages Web. Cet article présentera la méthode d'installation et les compétences d'utilisation du composant d'imprimante JavaScript.

1. Installez le composant d'imprimante JavaScript

Tout d'abord, nous devons télécharger le composant d'imprimante JavaScript. Voici une bibliothèque d'impression JavaScript open source recommandée : Print.js. Print.js est une bibliothèque facile à utiliser qui ne nécessite aucune bibliothèque tierce, prend en charge les styles personnalisés et propose plusieurs méthodes d'impression.

Après avoir ouvert le site officiel de Print.js (https://printjs.crabbly.com/), nous pouvons voir que le responsable propose trois méthodes d'installation :

1 Introduction via CDN

Cette méthode est la plus simple et la plus simple. uniquement Vous devez copier le code suivant dans le fichier HTML :

<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>

2. Installer à l'aide du package NPM

Si vous utilisez l'environnement Node.js, vous pouvez utiliser la commande suivante pour installer :

npm install print-js

3.

Vous pouvez également télécharger manuellement le code Print.js sur GitHub, ou télécharger la dernière version du package compressé Print.js sur le site officiel et l'extraire dans votre projet.

2. Utilisez le composant d'imprimante JavaScript

1. Imprimer le texte

Étant donné que Print.js est très pratique à utiliser, il vous suffit d'appeler une fonction pour réaliser la fonction d'impression. Voici un exemple simple d'impression de texte :

<script>
    function printText() {
        var text = "这是一段测试文本。";
        printJS({printable: text, type: 'raw'})
    }
</script>

<button onclick="printText()">打印文本</button>

Dans le code ci-dessus, nous définissons une fonction JavaScript printText(), qui est utilisée pour initialiser le composant d'impression et imprimer le texte spécifié. Parmi eux, imprimable est le texte que nous voulons sortir via l'imprimante, et le paramètre type spécifie le type de contenu imprimé ici, nous le déclarons comme brut, ce qui signifie que le texte imprimé est le texte original.

Dans le fichier HTML, nous avons ajouté un bouton, lorsque l'utilisateur clique sur le bouton, la fonction printText() sera appelée et le texte sera imprimé.

2. Imprimer des pages Web

En plus d'imprimer du texte, le composant d'imprimante JavaScript peut également nous aider à imprimer l'intégralité de la page Web, y compris les styles et les images, etc. Voici un exemple simple d'impression de page Web :

<script>
    function printPage() {
        printJS({printable: 'https://www.example.com', type: 'url'})
    }
</script>

<button onclick="printPage()">打印网页</button>

Dans le code ci-dessus, nous définissons une fonction JavaScript nommée printPage() Lorsque l'utilisateur clique sur le bouton, cette fonction sera référencée pour initialiser le composant d'impression et imprimer l'intégralité du Web. page.

Dans cet exemple, nous spécifions que le type de contenu à imprimer est une URL et que l'adresse de la page Web à imprimer est la https://www.example.com spécifiée.

3. Style d'impression personnalisé

Le composant d'imprimante JavaScript prend également en charge les styles d'impression personnalisés, ce qui peut nous aider à choisir les polices et les paramètres de composition appropriés lors de l'impression. Voici un exemple de style d'impression personnalisé :

<script>
    function printStyledText() {
        var text = "这是一段测试文本。";
        var style = "<style>body {font-family: Arial, sans-serif; font-size: 12pt;}</style>";
        printJS({printable: style + text, type: 'raw'})
    }
</script>

<button onclick="printStyledText()">打印格式化文本</button>

Dans le code ci-dessus, lors de la définition de la fonction printStyledText(), nous utilisons la variable style pour spécifier le style CSS à utiliser, parmi lesquels font-family et font- attributs de taille sous le corps Spécifie le style du texte imprimé. De plus, nous intégrons le style dans le contenu imprimable, et le texte final imprimé aura ce style.

Dans cet exemple, nous pouvons modifier davantage l'apparence du contenu imprimé en modifiant le style CSS.

3. Résumé

Cet article présente la méthode d'installation et les compétences d'utilisation du composant d'imprimante JavaScript, et montre des exemples d'impression de texte, d'impression de pages Web et de personnalisation des styles d'impression. En utilisant ces méthodes, nous pouvons mettre en œuvre rapidement la fonction d’impression des pages Web et contrôler parfaitement l’apparence du contenu imprimé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!