如何在 Vue 3 中打印特定元素? [英] How to print a specific element in Vue 3?
问题描述
我正在处理一个项目，我希望该功能能够打印页面的特定元素.有一个叫做 VueHtmlToPaper 的 mixin/plugin 可以完全满足我的要求，但是我无法将它导入到我的 Vue 3 CLI 项目中，因为它是为 VueJS2 创建的，并且全局 API 是不同的.任何帮助表示赞赏.
main.js
import { createApp } from 'vue'从'./App.vue'导入应用程序createApp(App).mount('#app')项目结构:
由于这个插件不兼容vue 3，我们可以基于vue-html-to-paper 插件:
- 在项目根目录中创建一个名为 plugins 的文件夹，然后在其中添加具有以下内容的
VueHtmlToPaper.js文件:
<预><代码>函数 addStyles(win, 样式) {style.forEach((style) => {let link = win.document.createElement("link");link.setAttribute("rel", "stylesheet");link.setAttribute("type", "text/css");link.setAttribute("href", style);win.document.getElementsByTagName("head")[0].appendChild(link);});}const VueHtmlToPaper = {安装(应用程序，选项 = {}){app.config.globalProperties.$htmlToPaper = (埃尔，本地选项，cb = () =>真的) =>{让 defaultName = "_blank",defaultSpecs = ["fullscreen=yes", "titlebar=yes", "scrollbars=yes"],默认替换 = 真，默认样式 = [];让 {名称 = 默认名称，规格 = 默认规格，替换 = 默认替换，样式 = 默认样式} = 选项；//如果有 localOptions//TODO: 改进逻辑如果(！！localOptions){if (localOptions.name) name = localOptions.name;if (localOptions.specs) 规格 = localOptions.specs;if (localOptions.replace) 替换 = localOptions.replace;if (localOptions.styles) 样式 = localOptions.styles;}规格 = !!specs.length ?specs.join(",") : "";const element = window.document.getElementById(el);如果(！元素){alert(`未找到要打印的元素#${el}！`);返回;}const url = "";const win = window.open(url, name, specs, replace);win.document.write(`<头><title>${window.document.title}</title><身体>${element.innerHTML}</html>');addStyles(win, style);setTimeout(() => {win.document.close();赢.焦点()；赢.打印()；赢.关闭()；cb();}, 1000);返回真；};}};导出默认的 VueHtmlToPaper；
我刚刚复制/粘贴了这个代码 然后我用 app 替换了 Vue，然后在 main.js 中导入:
import { createApp } from 'vue'从'./App.vue'导入应用程序从 './plugins/VueHtmlToPaper' 导入 VueHtmlToPaper让 app=createApp(App);app.use(VueHtmlToPaper)app.mount('#app')然后在任何组件中使用它，例如:
<div class="home"><img alt="Vue logo"src=../assets/logo.png"><!-- 来源--><div id="printMe"><h1>打印我！</h1><!-- 输出--><button @click="print">print</button>
<script lang="ts">进口 {定义组件来自'vue';从 '@/components/HelloWorld.vue' 导入 HelloWorld；/导出默认defineComponent({name: '家',组件: {你好，世界，},方法: {打印() {this.$htmlToPaper('printMe')}},安装(){}});
I'm working on a project where I want the functionallity to print a specific element of my page. There is a mixin/plugin called VueHtmlToPaper that does exactly what I want but I have trouble importing it into my Vue 3 CLI project since it was created for VueJS2 and the global API is different. Any help is appreciated.
main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
Project structure :
Since this plugin is not compatible with vue 3, we could do our plugin based on vue-html-to-paper plugin :
- create a folder called plugins in project root then inside it add
VueHtmlToPaper.jsfile with the following content :
function addStyles(win, styles) {
styles.forEach((style) => {
let link = win.document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", style);
win.document.getElementsByTagName("head")[0].appendChild(link);
});
}
const VueHtmlToPaper = {
install(app, options = {}) {
app.config.globalProperties.$htmlToPaper = (
el,
localOptions,
cb = () => true
) => {
let defaultName = "_blank",
defaultSpecs = ["fullscreen=yes", "titlebar=yes", "scrollbars=yes"],
defaultReplace = true,
defaultStyles = [];
let {
name = defaultName,
specs = defaultSpecs,
replace = defaultReplace,
styles = defaultStyles
} = options;
// If has localOptions
// TODO: improve logic
if (!!localOptions) {
if (localOptions.name) name = localOptions.name;
if (localOptions.specs) specs = localOptions.specs;
if (localOptions.replace) replace = localOptions.replace;
if (localOptions.styles) styles = localOptions.styles;
}
specs = !!specs.length ? specs.join(",") : "";
const element = window.document.getElementById(el);
if (!element) {
alert(`Element to print #${el} not found!`);
return;
}
const url = "";
const win = window.open(url, name, specs, replace);
win.document.write(`
<html>
<head>
<title>${window.document.title}</title>
</head>
<body>
${element.innerHTML}
</body>
</html>
`);
addStyles(win, styles);
setTimeout(() => {
win.document.close();
win.focus();
win.print();
win.close();
cb();
}, 1000);
return true;
};
}
};
export default VueHtmlToPaper;
I just copied/pasted this code and I replaced Vue by app, then import it in main.js :
import { createApp } from 'vue'
import App from './App.vue'
import VueHtmlToPaper from './plugins/VueHtmlToPaper'
let app=createApp(App);
app.use(VueHtmlToPaper)
app.mount('#app')
then use it in any component like :
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<!-- SOURCE -->
<div id="printMe">
<h1>Print me!</h1>
</div>
<!-- OUTPUT -->
<button @click="print">print</button>
</div>
</template>
<script lang="ts">
import {
defineComponent
} from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; /
export default defineComponent({
name: 'Home',
components: {
HelloWorld,
},
methods: {
print() {
this.$htmlToPaper('printMe')
}
},
mounted() {
}
});
</script>
这篇关于如何在 Vue 3 中打印特定元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
