图片/PDF图片预览

package com.dzbh.bhdd.controller;

import org.apache.log4j.Logger;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.net.URLDecoder;


/**
 * 保函预览接口
 */
@Controller
@RequestMapping("/imgio")
public class ImgIOController {
	 private static Logger logger=Logger.getRootLogger();
	
	
	@RequestMapping(value="/img")
	public void imgIO(String url,HttpServletRequest request,HttpServletResponse response) throws IOException{
		FileInputStream fis=null;
		OutputStream toClient=null;
		try {
				String type="";
				String urlPath=URLDecoder.decode(url);
				if(url.endsWith("jpg")){
					type = "image/jpeg";
				}else if(url.endsWith("png")){
					type = "image/png";
				}else if (url.endsWith("html")) {
					type="text/html";
				}else  if (url.endsWith("pdf")) {
					type="application/pdf";
				}else{
					type = "/*";
				}
				File file=new File(urlPath);
				if (file.exists()) {
				fis = new FileInputStream(urlPath); // 以byte流的方式打开文件

	            int i=fis.available(); //得到文件大小
//	            System.out.println("文件路径:"+urlPath);
//	            System.out.println("文件大小:"+i);
	            byte data[]=new byte[i];
	            fis.read(data);  //读数据
	            response.setContentType(type); //设置返回的文件类型
	            toClient =response.getOutputStream(); //得到向客户端输出二进制数据的对象
	            toClient.write(data);  //输出数据
	            toClient.flush();
	            toClient.close();
	            fis.close();
				}else{
					logger.info("图片不存在---》"+urlPath);
				}

		} catch (Exception e) {
			 logger.error("用户断开页面,异常停止流的输出");
		}finally{
			if(toClient != null){
				toClient.flush();
				toClient.close();
			}
			if(fis != null){
				fis.close();
			}
		}
	}
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js 是一个流行的前端框架,用于构建用户界面。如果你需要在 Vue 应用中实现 PDF 文件转换为图片预览,你可以使用一些第三方库来辅助完成这个功能。以下是一个简单的步骤和推荐的库: 1. **安装依赖**:首先,你需要安装一个叫做 `html2canvas` 的库,它是一个 JavaScript 库,能够将 HTML 内容转换为 canvas,然后你可以选择另一个库如 `pdfjs-dist` 来处理 PDF 文件。 ``` npm install html2canvas pdfjs-dist ``` 2. **PDF 预加载**:使用 `pdfjs-dist` 加载 PDF 文件并解析。 ```javascript import { PDFJS } from 'pdfjs-dist'; PDFJS.getDocument('your_pdf_url_or_file_path').promise.then(pdf => { // 处理PDF内容 }); ``` 3. **转换为HTML**:当PDF加载完成后,将其转换为可渲染的HTML元素。 ```javascript const render PDFPage to HTML = async (page) => { const container = document.createElement('div'); const viewport = page.getViewport({ scale: 1 }); container.style.width = `${viewport.width}px`; container.style.height = `${viewport.height}px`; container.innerHTML = await page.renderTextContent({ layoutMode: 'canvas' }); return container; }; ``` 4. **图片预览**:使用 `html2canvas` 将HTML转换为图片。 ```javascript html2canvas(render(pdf.getPage(i))).then(canvas => { // 在Vue组件中显示或保存图片 this.previewImage = canvas.toDataURL(); }); ``` 5. **Vue组件实现**:在 Vue 组件中,你可以根据需要调用这些方法,比如在一个按钮点击事件中。 记得在实际项目中处理好错误处理和用户体验,例如进度条展示、PDF加载失败的提示等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值