vue实现打印预览pdf(window.open)

打开接口地址,这个方法是后端已经写好打印window.print(); 前端就只需要打开这个网页地址即可,类型需要是html
window.open(res.request.responseURL,"_blank")

window.open用法

window.open(URL,name,features,replace);
一共四个参数

第一个是url地址,这个如果写入url,则打开一个空白的页面窗口
第二个是打开窗口的方式 ,如果没有写入则新打开一个窗口,四个值:

_blank - URL加载到一个新的窗口。这是默认
_parent - URL加载到父框架
_self - URL替换当前页面
_top - URL替换任何可加载的框架集

第三个是打开窗口的特征,可以设置款宽高位置等,如果没有写入则显示浏览器标准特征
第四个规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目,两个值:

true - URL 替换浏览历史中的当前条目。
false - URL 在浏览历史中创建新的条目。
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
你可以使用pdf.js来在Vue应用程序中预览PDF文件。pdf.js是一个开源的JavaScript库,可在Web浏览器中显示PDF文档。 以下是一个简单的Vue组件,使用pdf.js来预览PDF文件: ```vue <template> <div> <canvas ref="canvas"></canvas> </div> </template> <script> import pdfjsLib from 'pdfjs-dist' export default { props: { url: { type: String, required: true } }, mounted() { this.renderPdf() }, methods: { async renderPdf() { const pdf = await pdfjsLib.getDocument(this.url).promise const page = await pdf.getPage(1) const viewport = page.getViewport({ scale: 1 }) const canvas = this.$refs.canvas const context = canvas.getContext('2d') canvas.width = viewport.width canvas.height = viewport.height await page.render({ canvasContext: context, viewport: viewport }) } } } </script> ``` 在这个组件中,我们首先引入了pdfjsLib库,然后在mounted钩子中调用renderPdf方法来渲染PDF文件。在renderPdf方法中,我们首先通过pdfjsLib.getDocument方法获取PDF文档对象,然后通过getPage方法获取第一页的页面对象,并使用getViewport方法获取页面的视口对象。接下来,我们使用canvas元素来呈现PDF页面,并使用page.render方法将页面呈现到canvas上。 你可以像这样在其他Vue组件中使用这个组件: ```vue <template> <div> <PdfViewer url="your-pdf-url"></PdfViewer> </div> </template> <script> import PdfViewer from './PdfViewer.vue' export default { components: { PdfViewer } } </script> ``` 这个组件可以在浏览器中预览PDF文件,但是在生产环境中,你需要将pdf.js和pdf.worker.js文件放到你的web服务器上,并通过script标签加载它们。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值