javascript - How to print the content of a specified area on a webpage written in Vue? ?

Question

The webpage written by vue needs to print the content of the specified area, retain the original webpage style, and the original webpage content cannot be changed after printing, and jqprint cannot be used. How can this be achieved?

Answer 1

@media print {
    .not-print {
        opacity: 0
    }
}

In the area you don’t want to print, add the .not-print class~
A rough way. . .

Answer 2

Basically the idea on the first floor, media queries are hidden in blocks that do not need to be printed when printing.
You can use opacity or visibility to hide.

Answer 3

http://stackoverflow.com/ques...

mywindow.document.write(this.$el.innerHTML);

Answer 4

Print part of the web page

var createPdf = () => {
    let newWindow = window.open("_blank");   //打开新窗口
    let codestr = document.getElementById("pdf-wrap").innerHTML;   //获取需要生成pdf页面的p代码
    newWindow.document.write(codestr);   //向文档写入HTML表达式或者JavaScript代码
    newWindow.document.close();     //关闭document的输出流, 显示选定的数据
    newWindow.print();   //打印当前窗口
    return true;
}