在web服务器上,有些pdf, 怎么让用户在页面上点击一个按钮,就直接打印?

有一些报表软件,可以在后台,动态生成一个pdf文件,比如jasperreport,那么,有没有办法,让用户点击责面上的一个按钮,直接在打印机中打印出来呢?答案是可以,使用jatoolsPrinter,代码如下:

<a target=_blank href="http://bbs.jatools.com/redirect.php?tid=1732&goto=lastpost#lastpost" style="word-wrap: break-word; color: rgb(0, 0, 0); text-decoration: none; font-family: Helvetica, Arial, sans-serif; font-size: 13.3333339691162px; line-height: 21.3333339691162px;"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
function printReport() {
	var printer = document.getElementById('printer_list').value;
	var url = getPDFUrl();
	document.getElementById("jatoolsPrinter").printDocument(url, {
				printer : printer
			});
}
function getPDFUrl() {
	return "a.pdf" // 给出pdf地址,可以是一个静态pdf文件,也可以动态生成的一个pdf
}
function getAvailablePrinters() {
	var printer_list = document.getElementById('printer_list');
	var printers = document.getElementById("jatoolsPrinter").getPrinters(); // 打印机列表是一个字符串数组
	if (printers) {
		for (i = 0; i < printers.length; i++)
			printer_list.options[i + 1] = new Option(printers[i], printers[i]);
		printer_list.options[0].selected = true;
	}
}
</script>
</head>
<body onload='getAvailablePrinters()' style='padding:30px;'>
<select id="printer_list">
    <option>--默认--</option>
</select>
<input type="button" value="打印pdf报表" onClick="printReport()">
<object id="jatoolsPrinter" codebase="jatoolsPrinter.cab#version=5,4,0,0"
        classid="clsid:B43D3361-D075-4BE2-87FE-057188254255" width="0" height="0">
</object>
</body>
</html>
</a>
完成后的效果:




### 实现点击链接或按钮时预览或下载PDF文档 #### 使用浏览器内置PDF查看器预览PDF 为了利用现代浏览器自带的PDF阅读能力,可以采用简单的HTML标签来嵌入PDF文件。这不仅简化了开发过程还提高了加载效率。 ```html <iframe src="example.pdf" width="100%" height="600px"></iframe> ``` 或者使用`embed`标签[^1] ```html <embed src="example.pdf" type="application/pdf" width="100%" height="600px"/> ``` 这两种方式都可以让支持的浏览器直接显示PDF内容而无需额外安装软件。 #### Vue项目集成PDF.js库进行自定义预览 对于更复杂的场景比如需要定制化界面或是处理较大规模的应用程序,则推荐引入第三方库如PDF.js。下面是一个基于Vue框架的例子展示了怎样创建一个专门用于呈现PDF文档的新页面: - 首先准备静态资源,在项目的`static`文件夹内建立名为`pdf`的新子文件夹并将从[pdf.js](https://mozilla.github.io/pdf.js/)获取的相关文件放置于此处; - 接着构建视图组件,其中包含了指向上述路径下的viewer.html以及动态传递过来的目标PDF文件位置的信息; ```javascript export default { data() { return { url: '', viewerUrl: '/static/pdf/web/viewer.html?file=' // 解压缩后的文件地址 } }, onLoad(options) { this.url = this.viewerUrl + encodeURIComponent(options.url); // 将插件地址与接收的文件地址拼接并编码 } } ``` 注意这里对URL进行了编码以防止特殊字符引起解析错误[^2]。 #### AJAX请求配合服务端响应实现在线预览 当涉及到服务器交互时,可以通过发送HTTP GET/POST请求至后端API接口获得二进制流形式的数据再交由前端解释执行。例如在一个Vue应用中调用`axios.get()`方法指定返回类型为blob对象之后将其转换成base64字符串供客户端浏览[^3]。 然而这种方式可能会遇到性能瓶颈特别是面对大型或多页数的PDF文件时表现尤为明显[^4]。 #### 提供下载选项而非仅限于在线观看 如果希望给予用户保存副本的选择权而不是仅仅局限于屏幕上的阅览体验,那么可以在触发事件处理器内部构造临时超链接元素并通过编程手段模拟点击动作完成整个流程[^5]: ```javascript handleDownload(fileUrl='', fileName='defaultName'){ const a = document.createElement('a'); fetch(fileUrl) .then(response => response.blob()) .then(blobData => { a.href = URL.createObjectURL(blobData); a.download = decodeURI(fileName); document.body.appendChild(a); a.click(); document.body.removeChild(a); }); } ``` 此函数接受两个参数分别是远程资源定位符(即待下载文件所在网址)和期望赋予本地存储实体的名字,默认情况下后者会被设作“defaultName”。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值