目前正在做浏览器端采用js方式实现打印这么一个功能，JS打印实现的方法很多，但是兼容各个浏览器实现打印预览的功能有些棘手，现将实现的内容及遇到的问题记录下来，希望有大牛看到所提的问题后可以给予解答，在此感谢啦。
1.JS实现打印的方式
方式一：window.print()
window.print();会弹出打印对话框，打印的是window.document.body.innerHTML中的内容，
方式二：采用document.execCommand(”print”)
该方式也兼容各个版本的浏览器，同window.print()一样，其启动的是打印对话框，chrome的打印对话框自带预览功能，但是IE、火狐仅仅只弹出打印设置对话框，没有预览功能。
方式三：采用JQuery插件使用jQuery浏览插件可以很方便的进行局部打印 jquery.print.js 下载地址：[github.com/DoersGuild/…]
$("#ElementId").print({
globalStyles:true,//是否包含父文档的样式，默认为true
mediaPrint:false,//是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
stylesheet:null,//外部样式表的URL地址，默认为null
noPrintSelector:".no-print",//不想打印的元素的jQuery选择器，默认为".no-print"
iframe:true,//是否使用一个iframe来替代打印表单的弹出窗口，true为在本页面进行打印，false就是说新开一个页面打印，默认为true
append:null,//将内容添加到打印内容的后面
prepend:null,//将内容添加到打印内容的前面，可以用来作为要打印内容
deferred:$.Deferred()//回调函数
});
方式四：vue项目下载打印插件使用vue-print-nb浏览插件可以很方便的进行局部打印 vue-print-nb 地址：[www.npmjs.com/package/vue…]
Vue2 Version:
npm install vue-print-nb --save
import Print from 'vue-print-nb'
// Global instruction
Vue.use(Print);
//or
// Local instruction
import print from 'vue-print-nb'
directives: {
print
}
Vue3 Version:
npm install vue3-print-nb --save
// Global instruction
import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')
//or
// Local instruction
import print from 'vue3-print-nb'
directives: {
print
}
方式五：使用clodop云打印上述方法的缺陷就是无法完成自动打印，为了完成项目需求选择接入clodop clodop 地址：[www.lodop.net/]
//通过解析源码发现lodop支持低版本浏览器所以只能选择clodop
import { MessageBox } from 'element-ui'
// ====页面动态加载C-Lodop云打印必须的文件CLodopfuncs.js====
var head = document.head || document.getElementsByTagName('head')[0] || document.documentElement
var oscript = document.createElement('script')
// 让本机的浏览器打印(更优先一点)：
oscript = document.createElement('script')
oscript.src = 'http://localhost:8000/CLodopfuncs.js?priority=2'
head.insertBefore(oscript, head.firstChild)
// 加载双端口(8000和18000）避免其中某个端口被占用：
oscript = document.createElement('script')
oscript.src = 'http://localhost:18000/CLodopfuncs.js?priority=1'
head.insertBefore(oscript, head.firstChild)
// 下载loadLodop
function loadLodop() {
window.open('/static/CLodop_Setup_for_Win32NT.exe')
}
// ====获取LODOP对象的主过程：====
function getLodop() {
var LODOP
try {
LODOP = getCLodop()
if (!LODOP && document.readyState !== 'complete') {
MessageBox.alert('C-Lodop打印控件还没准备好，请稍后再试！')
return
}
return LODOP
} catch (err) {
if (navigator.platform == "Win32" || navigator.platform == "windows") {
MessageBox.confirm('您还未安装打印控件，点击确定下载打印控件，安装成功后刷新页面即可进行打印', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
loadLodop()
})
}
else {
return 'linux'
}
}
}
export { getLodop }
//操作过程中发现clodop对mac的支持性有问题只能将mac暂时剥离，大家可以提供解决方法
**方式五：使用光速云打印调研过程中发现的另一款云打印插件对mac支持性好但是是收费的
实现方式与clodop相似可以去官网直接阅览文档
