{"id":26539875,"url":"https://github.com/alessandro-pang/vue-print-next","last_synced_at":"2025-10-26T23:04:33.898Z","repository":{"id":246221966,"uuid":"820318106","full_name":"Alessandro-Pang/vue-print-next","owner":"Alessandro-Pang","description":"基于 vue3-print-np 改造的 vue 打印库，使用 Typescript 重构，对 vue3 setup 有更好的支持，支持手动调用打印函数等。","archived":false,"fork":false,"pushed_at":"2025-07-27T08:58:53.000Z","size":3179,"stargazers_count":147,"open_issues_count":6,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-08-09T18:46:28.261Z","etag":null,"topics":["print","typescirpt","vue-print","vue-print-nb","vue3-print"],"latest_commit_sha":null,"homepage":"https://alexpang.cn/vue-print-next/docs","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Alessandro-Pang.png","metadata":{"files":{"readme":"README.en.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-06-26T08:29:51.000Z","updated_at":"2025-08-08T03:23:39.000Z","dependencies_parsed_at":"2024-06-26T17:12:32.997Z","dependency_job_id":"49cd0965-62ba-4ad1-8c7a-e98e93572b79","html_url":"https://github.com/Alessandro-Pang/vue-print-next","commit_stats":null,"previous_names":["alessandro-pang/vue-print-next"],"tags_count":11,"template":false,"template_full_name":null,"purl":"pkg:github/Alessandro-Pang/vue-print-next","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alessandro-Pang%2Fvue-print-next","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alessandro-Pang%2Fvue-print-next/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alessandro-Pang%2Fvue-print-next/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alessandro-Pang%2Fvue-print-next/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Alessandro-Pang","download_url":"https://codeload.github.com/Alessandro-Pang/vue-print-next/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alessandro-Pang%2Fvue-print-next/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281185454,"owners_count":26457747,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-26T02:00:06.575Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["print","typescirpt","vue-print","vue-print-nb","vue3-print"],"created_at":"2025-03-22T00:19:39.287Z","updated_at":"2025-10-26T23:04:33.893Z","avatar_url":"https://github.com/Alessandro-Pang.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./public/logo.png\" alt=\"logo\" style=\"width: 70px\"\u003e\n  \u003ch1 style=\"margin: 4px 0 16px 0\"\u003eVue Print Next\u003c/h1\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-print-next\"\u003e\n    \u003cimg alt=\"NPM Version\" src=\"https://img.shields.io/npm/v/vue-print-next?color=orange\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-print-next\"\u003e\n    \u003cimg alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/d18m/vue-print-next\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/vue-print-next\"\u003e\n    \u003cimg alt=\"npm bundle size\" src=\"https://img.shields.io/bundlephobia/minzip/vue-print-next\"\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n![Alt](https://repobeats.axiom.co/api/embed/d78c098d0c6aded6d25e2603961030f7a1a96e64.svg \"Repobeats analytics image\")\n\nEnglish | [简体中文](./README.md)\n\n\u003e A Vue printing plugin that is simple, fast, convenient, and lightweight, supporting both Vue 2 and Vue 3.\n\nThis plugin is based on [vue3-print-nb](https://github.com/Power-kxLee/vue3-print-nb) and has been completely rewritten using TypeScript to better support Vue 3's setup function and Composition API.\n\n## 📚 Documentation\n\nOnline documentation: [https://alexpang.cn/vue-print-next/docs](https://alexpang.cn/vue-print-next/docs)\n\n## ✨ Features\n\n- Supports both Vue 2 and Vue 3 with strong compatibility\n- Supports directive calls and manual calls to the `VuePrintNext` method for printing\n- Full support for Vue 3's setup function and Composition API\n- Supports global and local content printing, as well as print preview functionality\n- Supports setting specific class styles to ignore during printing\n- Supports partial printing through CSS selectors or manually passed DOM nodes\n- Supports custom paper sizes and orientations\n- Supports dark mode and window mode\n- Supports customizable print toolbar configuration\n- Supports responsive design, adapting to different devices\n- Provides rich callback functions to meet various printing scenario requirements\n\n## 🔍 Demo\n\nThe project provides source code demos for both Vue2 and Vue3, which you can view after cloning the project\n\n- **Vue2:** /demos/vue2-demo\n- **Vue3:** /demos/vue3-demo\n\nOnline demo: [https://alexpang.cn/vue-print-next/vue3-demo](https://alexpang.cn/vue-print-next/vue3-demo)\n\n## 📦 Installation\n\nYou can install the plugin via npm, yarn, or pnpm:\n\n```bash\nnpm install vue-print-next --save\n# or\nyarn add vue-print-next\n# or \npnpm add vue-print-next\n```\n\n## 🚀 Quick Start\n\n### 1. Using the Plugin Globally\n\nIn your `main.ts` or `main.js` file:\n\n```typescript\nimport {createApp} from 'vue';\nimport App from './App.vue';\nimport {printPlugin} from 'vue-print-next';\n\nconst app = createApp(App);\napp.use(printPlugin);\napp.mount('#app');\n```\n\n### 2. Using Directives in Vue3 Components\n\n```html\n\u003cscript setup\u003e\n  // Import the directive directly\n  import {vPrint} from 'vue-print-next';\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cbutton v-print\u003ePrint the entire page\u003c/button\u003e\n    \u003cbutton v-print=\"'#printMe'\"\u003ePrint partial content\u003c/button\u003e\n    \u003cdiv id=\"printMe\"\u003e\n      \u003cp\u003eThis is the content to be printed\u003c/p\u003e\n      \u003cp\u003eMore content...\u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n### 3. Using Directives in Vue2 Components\n\n```html\n\u003cscript\u003e\n  import {vPrint} from \"vue-print-next\";\n\n  export default {\n    name: 'App',\n    directives: {\n      print: vPrint\n    },\n  }\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cbutton v-print\u003ePrint the entire page\u003c/button\u003e\n    \u003cbutton v-print=\"'#printMe'\"\u003ePrint partial content\u003c/button\u003e\n    \u003cdiv id=\"printMe\"\u003e\n      \u003cp\u003eThis is the content to be printed\u003c/p\u003e\n      \u003cp\u003eMore content...\u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n### 4. Using the `VuePrintNext` Class\n\nIf you need more complex printing logic, you can use the `VuePrintNext` class directly:\n\n```html\n\u003cscript setup\u003e\n  import {VuePrintNext} from 'vue-print-next';\n\n  function handlePrint() {\n    new VuePrintNext({el: '#printMe', /** other parameters */});\n  }\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cbutton @click=\"handlePrint\"\u003ePrint partial content\u003c/button\u003e\n    \u003cdiv id=\"printMe\"\u003e\n      \u003cp\u003eThis is the content to be printed\u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n## 📋 API Details\n\n### `vPrint` Directive\n\n- **Full-screen printing**: `\u003cbutton v-print\u003ePrint the entire page\u003c/button\u003e`\n- **Partial printing**: `\u003cbutton v-print=\"'#printMe'\"\u003ePrint partial content\u003c/button\u003e`, where `#printMe` is the CSS selector for the DOM element to be printed.\n\n### `VuePrintNext` Class\n\nUsed for manually calling the print functionality.\n\n#### Parameter Description\n\n| Parameter                   | Type                        | Description                                | Default Value |\n|-----------------------------|------------------------------|-------------------------------------------|------------|\n| `el`                        | `string` \\| `HtmlElement` | Element to print, supports CSS selectors or DOM nodes | - |\n| `standard`                  | `string`                  | Document type, default is html5, options: html5, loose, strict | 'html5' |\n| `noPrintSelector`           | `string[]` \\| `string`    | CSS selectors to ignore during printing | - |\n| `popTitle`                  | `string`                  | Header when printing | Default current title |\n| `preview`                   | `boolean`                 | Whether to enable print preview | `false` |\n| `previewTitle`              | `string`                  | Preview window title | 'Print Preview' |\n| `previewPrintBtnLabel`      | `string`                  | Print button label in preview window | 'Print' |\n| `extraCss`                  | `string`                  | Additional CSS file path | - |\n| `extraHead`                 | `string`                  | Additional `\u003chead\u003e` content | - |\n| `url`                       | `string`                  | Print content from specified URL | - |\n| `asyncUrl`                  | `function`                | Method for asynchronously loading URL content | - |\n| `zIndex`                    | `number`                  | `z-index` value for preview window | 20002 |\n| `paperSize`                 | `string`                  | Paper size, options include 'A0' to 'A8', 'Letter', 'Legal', 'Tabloid', 'custom' | 'A4' |\n| `orientation`               | `string`                  | Paper orientation, options: 'portrait' or 'landscape' | 'portrait' |\n| `customSize`                | `object`                  | Custom paper size, only effective when paperSize is 'custom' | - |\n| `darkMode`                  | `boolean`                 | Whether preview window uses dark mode by default | `false` |\n| `windowMode`                | `boolean`                 | Whether preview window uses popup mode (non-fullscreen) | `false` |\n| `defaultScale`              | `number`                  | Default zoom ratio for preview window | 1 |\n| `previewTools`              | `object \\| boolean`       | Preview toolbar configuration, controls which tool buttons to display (zoom, theme, fullscreen) | `{ zoom: true, theme: true, fullscreen: true }` |\n| `openCallback`              | `function`                | Callback when print window opens | - |\n| `closeCallback`             | `function`                | Callback when print window closes | - |\n| `beforeOpenCallback`        | `function`                | Callback before print window opens (for print preview) | - |\n| `previewBeforeOpenCallback` | `function`                | Callback before preview iframe loads (for preview) | - |\n| `previewOpenCallback`       | `function`                | Callback after preview iframe loads (for preview) | - |\n\n## 🌰 Usage Examples\n\n### Printing the Entire Page\n\n```html\n\u003cbutton v-print\u003ePrint the entire page\u003c/button\u003e\n```\n\n### Printing Partial Content\n\nPrint partial content by specifying the `id` parameter:\n\n```html\n\u003cdiv id=\"printMe\"\u003e\n  \u003cp\u003eThis is the content to be printed\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cbutton v-print=\"'#printMe'\"\u003ePrint partial content\u003c/button\u003e\n```\n\n### Using ref to Get Print Element\n\nAllows passing a DOM node, as shown below, you can get the print element through `ref`\n\n```html\n\u003cscript setup lang=\"ts\"\u003e\n  import {ref, type Ref} from 'vue';\n  import {VuePrintNext} from \"vue-print-next\";\n\n  const printEle = ref(null) as Ref\u003cHTMLElement\u003e;\n  \n  function handlePrint() {\n    new VuePrintNext({el: printEle.value})\n  }\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv ref=\"printEle\"\u003e\n    \u003cp\u003eThis is the content to be printed\u003c/p\u003e\n  \u003c/div\u003e\n\n  \u003cbutton @click=\"handlePrint\"\u003ePrint partial content\u003c/button\u003e\n\u003c/template\u003e\n```\n\n### Passing Object Parameters\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cdiv id=\"printMe\"\u003e\n      \u003cp\u003eThis is the content to be printed\u003c/p\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\n  \u003cbutton v-print=\"printObj\"\u003ePrint partial content\u003c/button\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n  const printObj = {\n    el: \"#printMe\",\n    preview: true,\n    extraCss: \"https://cdn.example.com/extra.css\",\n    openCallback() {\n      console.log('Print executed');\n    },\n    closeCallback() {\n      console.log('Print tool closed');\n    }\n  }\n\u003c/script\u003e\n```\n\n### Printing a URL\n\nPrint by specifying a URL, ensuring your URL complies with the same-origin policy:\n\n```html\n\u003ctemplate\u003e\n  \u003cbutton v-print=\"printObj\"\u003ePrint specified URL\u003c/button\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n  const printObj = {\n    url: 'https://example.com/print-content'\n  }\n\u003c/script\u003e\n```\n\n### Ignoring Elements That Should Not Be Printed\n\nIgnore elements that should not be printed by setting the `noPrintSelector` parameter:\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv id=\"printMe\"\u003e\n    \u003cp\u003eGourd baby, gourd baby\u003c/p\u003e\n    \u003cspan class=\"no-print\"\u003eThis \u003cstrong\u003eshould not be printed\u003c/strong\u003e\u003c/span\u003e\n    \u003cp\u003eSeven flowers on one vine\u003c/p\u003e\n    \u003cspan class=\"no-print\"\u003eThis \u003cstrong\u003eshould not be printed\u003c/strong\u003e\u003c/span\u003e\n    \u003cp\u003eNot afraid of wind and rain\u003c/p\u003e\n    \u003cspan class=\"no-print\"\u003eThis \u003cstrong\u003eshould not be printed\u003c/strong\u003e\u003c/span\u003e\n  \u003c/div\u003e\n  \u003cbutton v-print=\"printObj\"\u003eIgnore elements that should not be printed\u003c/button\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n  const printObj = {\n    el: '#printMe',\n    // Allows using CSS selectors, supports passing an array\n    noPrintSelector: '.no-print'\n  }\n\u003c/script\u003e\n```\n\n### Asynchronously Loading URL Content\n\nIf your URL needs to be loaded asynchronously, you can use the following method:\n\n```html\n\u003ctemplate\u003e\n  \u003cbutton v-print=\"printObj\"\u003eAsynchronously load URL and print\u003c/button\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n  const printObj = {\n    asyncUrl(resolve) {\n      setTimeout(() =\u003e {\n        resolve('https://example.com/print-content');\n      }, 2000);\n    }\n  }\n\u003c/script\u003e\n```\n\n### Setting Paper Size and Orientation\n\nYou can set the size and orientation of the print paper using the `paperSize` and `orientation` parameters:\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv id=\"printMe\"\u003e\n    \u003cp\u003eThis is the content to be printed\u003c/p\u003e\n  \u003c/div\u003e\n  \u003cbutton v-print=\"printObj\"\u003eA4 Landscape Print\u003c/button\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n  const printObj = {\n    el: '#printMe',\n    paperSize: 'A4',           // Set paper size to A4\n    orientation: 'landscape',   // Set paper orientation to landscape\n    preview: true               // Enable preview mode\n  }\n\u003c/script\u003e\n```\n\n### Custom Paper Size\n\nWhen you need to use a non-standard paper size, you can set `paperSize` to `'custom'` and provide the `customSize` parameter:\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv id=\"printMe\"\u003e\n    \u003cp\u003eThis is the content to be printed\u003c/p\u003e\n  \u003c/div\u003e\n  \u003cbutton v-print=\"printObj\"\u003eCustom Size Print\u003c/button\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n  const printObj = {\n    el: '#printMe',\n    paperSize: 'custom',        // Set to custom size\n    customSize: {\n      width: '100',             // Width\n      height: '150',            // Height\n      unit: 'mm'                // Unit: mm, cm, in, px\n    },\n    preview: true\n  }\n\u003c/script\u003e\n```\n\n### Dark Mode and Window Mode\n\nYou can set the display mode of the preview interface using the `darkMode` and `windowMode` parameters:\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv id=\"printMe\"\u003e\n    \u003cp\u003eThis is the content to be printed\u003c/p\u003e\n  \u003c/div\u003e\n  \u003cbutton v-print=\"printObj\"\u003eDark Mode Preview\u003c/button\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n  const printObj = {\n    el: '#printMe',\n    preview: true,\n    darkMode: true,             // Enable dark mode\n    windowMode: true,           // Use popup mode (non-fullscreen)\n    defaultScale: 0.8           // Set default zoom ratio to 80%\n  }\n\u003c/script\u003e\n```\n\n### Custom Preview Toolbar\n\nYou can customize the display of the preview toolbar using the `previewTools` parameter:\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv id=\"printMe\"\u003e\n    \u003cp\u003eThis is the content to be printed\u003c/p\u003e\n  \u003c/div\u003e\n  \u003cbutton v-print=\"printObj\"\u003eCustom Toolbar\u003c/button\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n  const printObj = {\n    el: '#printMe',\n    preview: true,\n    // Only show zoom and theme toggle buttons, don't show fullscreen button\n    previewTools: {\n      zoom: true,\n      theme: true,\n      fullscreen: false\n    }\n  }\n\u003c/script\u003e\n```\n\n## 🤝 Contribution Guide\n\n1. Fork this repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## ⭐ Star History\n\n\u003ca href=\"https://star-history.com/#Alessandro-Pang/vue-print-next\u0026Date\"\u003e\n \u003cpicture\u003e\n   \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://api.star-history.com/svg?repos=Alessandro-Pang/vue-print-next\u0026type=Date\u0026theme=dark\" /\u003e\n   \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://api.star-history.com/svg?repos=Alessandro-Pang/vue-print-next\u0026type=Date\" /\u003e\n   \u003cimg alt=\"Star History Chart\" src=\"https://api.star-history.com/svg?repos=Alessandro-Pang/vue-print-next\u0026type=Date\" /\u003e\n \u003c/picture\u003e\n\u003c/a\u003e\n\n## 👥 Supporters\n\n\u003ca href=\"https://github.com/Alessandro-Pang/vue-print-next/stargazers\"\u003e\n \u003cpicture\u003e\n   \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://reporoster.com/stars/dark/Alessandro-Pang/vue-print-next\" /\u003e\n   \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://reporoster.com/stars/light/Alessandro-Pang/vue-print-next\" /\u003e\n   \u003cimg alt=\"Star History\" src=\"https://reporoster.com/stars/light/Alessandro-Pang/vue-print-next\" /\u003e\n \u003c/picture\u003e\n\u003c/a\u003e\n\n\u003ca href=\"https://github.com/Alessandro-Pang/vue-print-next/network/members\"\u003e\n \u003cpicture\u003e\n   \u003csource media=\"(prefers-color-scheme: dark)\" srcset=\"https://reporoster.com/forks/dark/Alessandro-Pang/vue-print-next\" /\u003e\n   \u003csource media=\"(prefers-color-scheme: light)\" srcset=\"https://reporoster.com/forks/light/Alessandro-Pang/vue-print-next\" /\u003e\n   \u003cimg alt=\"Fork History\" src=\"https://reporoster.com/forks/light/Alessandro-Pang/vue-print-next\" /\u003e\n \u003c/picture\u003e\n\u003c/a\u003e\n\n## 📄 License\n\n[MIT](http://opensource.org/licenses/MIT)\n\n---\n\nWelcome to discuss and raise issues or submit Pull Requests on [GitHub Issues](https://github.com/Alessandro-Pang/vue-print-next/issues)!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falessandro-pang%2Fvue-print-next","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falessandro-pang%2Fvue-print-next","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falessandro-pang%2Fvue-print-next/lists"}