添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

这个地方里面有个跨域配置可能需要注意在本地调试时,需配置上本地地址:

2. 如果你集成服务,他们会提供一个jsp后端项目。基本上像什么服务器之类的基本信息都给你了,需要对应改下位置就好,配置文件移动到和springboot的resource下

contorller

@Autowired
    private MyPdfFileResource myPdfFileResource;
    @RequestMapping(value = "/jingePdf",method = {RequestMethod.GET,RequestMethod.POST})
    @ApiOperation("金格请求入口")
    public void jingePdf(HttpServletRequest request, HttpServletResponse response) throws IOException, DataException {
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        String contentType = request.getContentType();
        try {
            PdfViewer.execute(request, response,myPdfFileResource);
        } catch (Throwable e) {
            if (ReqUtil.isStartWithApplicationJson(contentType)) {
                JSONObject obj = new JSONObject();
                obj.put("status", false);
                obj.put("message", "程序异常,请联系管理员!");
                response.getWriter().write(obj.toJSONString());

对于spring可以自动注入MyPdfFileResource.

前端部分让他们提供一个vue项目。他们有vue的示例

我们要关注的是如何传参数。

<template>
  <div class="UploadFile-container">
    <template v-if="filePath && filePath.length > 0">
      <el-button
        type="danger"
        icon="el-icon-s-check"
        circle
        @click="showSignaturePage"
      ></el-button>
      <el-button
        v-if="this.formData.signatureDownLoadUrl"
        type="success"
        icon="el-icon-download"
        circle
        @click="download"
      ></el-button>
    </template>
    <el-dialog title="签章" :visible.sync="dialogFormVisible" append-to-body>
      <iframe
        id="jingeIframe"
        class="App-iframe"
        ref="iframe"
        :title="title"
        src="./pdfjs/viewer.html"
        @load="setConfig"
      ></iframe>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="closeDialog">关闭</el-button>
    </el-dialog>
</template>
<script>
const units = {
  KB: 1024,
  MB: 1024 * 1024,
  GB: 1024 * 1024 * 1024
import { getDownloadUrl } from "@/api/common";
import { PreviewUrl, EditUrl } from "@/api/extend/documentPreview";
export default {
  name: "UploadYozoFile",
  props: {
    value: {
      type: String,
      default: ""
  data() {
    return {
      name: "file",
      filePath: "",
      dialogFormVisible: false,
      previewUrl: undefined,
      fileTitle:undefined,
      formData: {
        appType: "1",
        previewUrl: undefined,
        editUrl: undefined,
        signatureDownLoadUrl: undefined,
        signaturePreviewUrl: undefined
      title: "金格云阅读",
      iframeData: null,
      nowShow: "",
  methods: {
    closeDialog() {
      this.dialogFormVisible = false;
    open(documentId) {
      const KGPdfViewerWebApp = this.iframeData.KGPdfViewerWebApp;
      KGPdfViewerWebApp.open(documentId);
    stamp() {
      const KGPdfViewerWebApp = this.iframeData.KGPdfViewerWebApp;
      KGPdfViewerWebApp.stamp();
    stampOfText(text) {
      const KGPdfViewerWebApp = this.iframeData.KGPdfViewerWebApp;
      KGPdfViewerWebApp.stampOfText(
        `1-${KGPdfViewerWebApp.PDFViewerApplication.pagesCount}`,
    stampOfXY(left, top) {
      const KGPdfViewerWebApp = this.iframeData.KGPdfViewerWebApp;
      KGPdfViewerWebApp.stampOfXY(
        `1-${KGPdfViewerWebApp.PDFViewerApplication.pagesCount}`,
        left,
    setConfig() {
      const KGPdfViewerWebApp = this.iframeData.KGPdfViewerWebApp;
      KGPdfViewerWebApp.setUrl(this.define.jinge);
// 这里很关键配置的就是后端接口的地址,如 localhost:8080/api/file/jingePdf 
      KGPdfViewerWebApp.userId = "T001";
      KGPdfViewerWebApp.sealType = "PT";
      KGPdfViewerWebApp.stampType = 0;
      KGPdfViewerWebApp.sealOrigin = 0;
      KGPdfViewerWebApp.certOrigin = 0;
      KGPdfViewerWebApp.fileType = "PDF";
      KGPdfViewerWebApp.stampSuccess = res => {
        let result = JSON.parse(res);
        this.formData.signaturePreviewUrl = result.signaturePreviewUrl;
        this.formData.signatureDownLoadUrl = result.signatureDownLoadUrl;
        let data = JSON.stringify({
          ...this.formData,
          signaturePreviewUrl: result.signaturePreviewUrl,
          signatureDownLoadUrl: result.signatureDownLoadUrl
        this.$emit("input", data);
        this.$emit("change", data);
      KGPdfViewerWebApp.deleteSealSuccess = () => {};
       let pdf = this.formData.signatureDownLoadUrl;
        // 拼接文件名
        pdf = pdf + "##" + this.fileTitle;
        console.log(pdf);
      this.open(pdf);
    download() {
      if (!this.formData.signatureDownLoadUrl) return;
      window.location.href = this.formData.signatureDownLoadUrl;
    solveUrl() {
      return new Promise((resolve, reject) => {
        if (!this.filePath) return;
        PreviewUrl({ urlRelativePath: this.filePath,convert:true }).then(res => {
          this.previewUrl = res.data.viewUrl;
          this.fileTitle = res.data.title;
          resolve(res.data.viewUrl);
      }).catch(err => {
        reject(err);
    showSignaturePage() {
      // 如果signaturpreviewurl为空,使用filepath获取可盖章地址
      this.dialogFormVisible = true;
      this.$nextTick(async () => {
        if (!this.iframeData) {
          this.iframeData = this.$refs.iframe.contentWindow;
        await this.initSignature();
        let pdf = this.formData.signatureDownLoadUrl;
        // 拼接文件名
        this.nowShow = pdf + "##" + this.fileTitle;
        // this.open(this.nowShow);
    // 初始化盖章地址
    async initSignature() {
      return new  Promise(async (resolve, reject)=>{
         if (!this.formData.signaturePreviewUrl) {
          this.formData.signaturePreviewUrl = await this.solveUrl();
         this.formData.signatureDownLoadUrl = this.formData.signaturePreviewUrl.replaceAll(
              "fcscloud/view/preview",
              "fcscloud/view/download"
          resolve()
</script>
<style scoped lang="scss">
>>> .el-button {
  margin: 5px;
.down-wrap {
  text-align: center;
.App-iframe {
  width: 100%;
  height: 600px;
  border: none;
.App-button-group {
  display: flex;
  width: 100vw;
  justify-content: space-around;
  margin: 0 auto;
.App-button {
  width: 120px;
  height: 32px;
  background: #fff;
  outline: none;
  border: none;
  border-radius: 4px;
  padding: 0;
  margin-bottom: 24px;
  cursor: pointer;
</style>

代码只是说明使用,结合具体业务封装组件。主要是通过this.open方法传,试过了这个地方没法使用对象传多个参数,看了下源码发现他就是一个string。所以要this.open只能传一个字符串。要么用拼接传过去,要么用json字符串传过去,这里简单使用拼接方式。

后端对应会填充到documentid.具体处理的话你们需要根据自己的规则写。

这是我的,可以参考。

package jnpf.base;
import cn.hutool.http.HttpRequest;
import cn.hutool.http.HttpResponse;
import cn.hutool.http.HttpUtil;
import com.alibaba.fastjson.JSONObject;
import com.kinggrid.pdfviewer.PdfFileResource;
import jnpf.emnus.YzFileApi;
import jnpf.file.FileApi;
import jnpf.model.YozoFileContext;
import jnpf.model.YozoFileOperator;
import jnpf.model.YozoFileParams;
import jnpf.util.JsonUtil;
import jnpf.util.YozoUtils;
import lombok.extern.slf4j.Slf4j;
import net.sf.ehcache.Cache;
import net.sf.ehcache.Element;
import org.apache.commons.io.IOUtils;
import org.springframework.beans.factory.InitializingBean;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Component;
import java.io.*;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.*;
 * 该接口实现为多实例,可以设置成员变量
 * 方法执行顺序
 *            1、getPdfFile
 *            2、getPdfFileStream
 *            3、getSavePdfFileSteam
 *            4、getDocumentName
 *            5、success
 * @author Administrator
@Slf4j
@Component
public class MyPdfFileResource extends PdfFileResource  {
//    private final static Logger LOGGER = LoggerFactory.getLogger(MyPdfFileResource.class);
	@Autowired
	private FileApi fileApi;
	@Autowired
	private YozoFileOperator yozoFileOperator;
	@Value("${config.YozoOwnPreview}")
	private String yozoOwnPreview;
    private  Cache keyModeCache=null;
    // 上传后返回的信息
	private Map<String, String> result;
	// 临时保存的文件路径
    private String tmpFile;
		keyModeCache=BaseCacheImpl.cacheManager.getCache("keyModeCache");
     * 返回需要盖章或查看PDF:文件模式
    @Override
	public String getPdfFile() {
        // 如果文件流模式,该接口返回null
        // Tomcat 6 及以下版本
		// request.getSession().getServletContext().getRealPath("/files/" + documentId);
		// return request.getServletContext().getRealPath("/files/" + documentId);
		String fileName = fileApi.getPath("temporary")+"1.pdf";
//		return fileName;
        return null;
	 * 返回需要盖章或查看PDF:文件流模式
	 * 远程文件下载到本地的temp.pdf
	 * @return
	@Override
	public InputStream getPdfFileStream() {
		String fileName = fileApi.getPath("temporary")+"temp.pdf";
		FileInputStream fileInputStream=null;
		// 获取转化地址
		String[] split = documentId.split("##");
		String fileUrl= split[0];
		try {
			FileOutputStream fos = new FileOutputStream(fileName);
			long size = HttpUtil.download(fileUrl, fos,true);
			fileInputStream = new FileInputStream(fileName);
		} catch (IOException e) {
			e.printStackTrace();
		return fileInputStream;
	 * 盖章后文件保存
	@Override
	public OutputStream getSavePdfFileSteam() {
//		String dir = request.getServletContext().getRealPath("/files");
		String dir =  fileApi.getPath("temporary");
//		tmpFile = dir  + UUID.randomUUID().toString() + File.separator + documentId;
		String[] split = documentId.split("##");
		tmpFile = dir   + split[1] ;
		FileOutputStream fileOutputStream;
		try {
			fileOutputStream = new FileOutputStream(tmpFile);
		} catch (FileNotFoundException e) {
			throw new RuntimeException(e.getMessage(),e);
		return fileOutputStream;
	 * 文档名称,记录日志时会使用
	@Override
	public String getDocumentName(){
		return "document.pdf";
	 *  加盖、删除印章等操作成功会执行该方法
	 *	1、可以实现覆盖原文档
	 *  2、删除原文档等
	@Override
	public void success() {
//		log.info("success action = " +  action);
//		log.info("success"+action);
		// 覆盖盖章后的文档
		if(tmpFile != null){
			saveFile();
	 * 加盖、删除印章等操作失败时,删除临时文件
	@Override
	public void fail() {
//		log.info("fail action = " +  action);
		if(tmpFile != null){
			File file = new File(tmpFile);
			if(file.exists())file.delete();
	 * 覆盖原文档 ,上传远程,删除下载回来的文件
	private void saveFile(){
		// 原文档路径
//		String fileName = dir + File.separator + documentId;
		FileOutputStream fileOutputStream = null;
		FileInputStream in = null;
		File file = new File(tmpFile);
		String url = yozoOwnPreview + YzFileApi.UPLOAD_PREVIEW.getMethod();
		String resultString = YozoUtils.submitPost(url, file);
		Map<String, Object> maps = JSONObject.parseObject(resultString, Map.class);
		result = (Map<String, String>) maps.get("data");
		if(file.exists()) {
			file.delete();
		// 删除临时文件
		String fileName = fileApi.getPath("temporary")+"temp.pdf";
		File file2 = new File(fileName);
		if(file2.exists()) {
			file2.delete();
		// 本地复制文件的形式
//		try{
//			in = new FileInputStream(tmpFile);
//			fileOutputStream = new FileOutputStream(fileName);
//			IOUtils.copy(in, fileOutputStream);
//		} catch (IOException e) {
//			throw new RuntimeException(e.getMessage(), e);
//		} finally {
//			IOUtils.closeQuietly(in);
//			IOUtils.closeQuietly(fileOutputStream);
//			if(file.exists()) file.delete();
//		}
	 * 域签名、电子签章,密钥盘签名时会先执行该方法,
	 * 1、实现保存盖章未签名的文档
	 * 2、签名完成后,需要在未签名的文档上(通过getPrePdfFile)加上签名值,覆盖该文档
	 * 3、再执行success
	@Override
	public void preSuccess(){
		// 集成时建议使用缓存机制(如:ehcache、redis等), 超过30秒删除该缓存
		keyModeCache.put(new Element(documentId, tmpFile));
	@Override
	public String getPrePdfFile(){
		tmpFile = keyModeCache.get(documentId).getObjectValue().toString();
		keyModeCache.remove(documentId);
		return tmpFile;
	@Override
	public List<String> getGBEsids() {
		List<String> list = new ArrayList<String>();
		list.add("36010000000624");
		return list;
	@Override
	public String getSuccessPassBackParameter() {
		Map data = new HashMap();
		// 转化获取预览地址
		YozoFileParams yozoFileParams = new YozoFileParams();
		yozoFileParams.setAppType("1");
		JSONObject jsonObject = null;
		YozoFileContext fileOperator = yozoFileOperator.getFileOperator(yozoFileParams);
		try {
			String viewUrl = result.get("data");
			yozoFileParams.setUrlRelativePath(viewUrl);
			HashMap<String, String> resultData = fileOperator.previewUrl(yozoFileParams);
			String signaturePreviewUrl = resultData.get("viewUrl");
			String downloadUrl = signaturePreviewUrl.replace("fcscloud/view/preview","fcscloud/view/download");
			data.put("signaturePreviewUrl",signaturePreviewUrl);
			data.put("signatureDownLoadUrl",downloadUrl);
			jsonObject = new JSONObject(data);
		} catch (IOException e) {
			e.printStackTrace();
		return jsonObject.toString();

1.要把jsp的jar打包到自己的后端哪里。请使用maven的,现在我想应该没人还是直接用jar包直接丢的吧,怎么把jar打包一个maven库,请参考如下文章。

将多个jar打包成一个jar_练气期小修士的博客-CSDN博客

2.使用前端的seturl其实就是写自己后端的服务地址。

类似这样的,localhost:8080/api/file/jingePdf 具体就是要访问在pdf接口即可

一.配置相关iSignature_Cloud_API.lic:认证文件,这个应该是有过期时间的。过期后可能会显示中间件授权相关提示。Mypdffileresource.java:关键实现类,金格操作会调用此处的方法进行操作。pdfviewer.properties:这个地方里面有个跨域配置可能需要注意在本地调试时,需配置上本地地址:2. 如果你集成服务,他们会提供一个jsp后端项目。基本上像什么服务器之类的基本信息都给你了,需要对应改下位置就好,配置文件移动到..
如有侵权立删 **需求:**管理系统有个在线pdf盖章的需求,公司购买了金格科技签章中间件,打包项目中有技术白皮书,但是写的过于笼统,因此记录一下开发过程. 定制人脸识别设备在线签订劳务协议,金格中间件需要插入加密U盘才可以签章 开发电脑必须安装金格应用 vue中新建html文件,引入插件,其中zjPdf为需要编写的js vue点击签章时跳转到新建的html 编写pdf.js var PDF = null; window.onload = function loadpage() { setTi
关于金格WebOffice2015是什么就不说了,可以自行百度下,最近在调研这个东西,所以下了试用版集成vue项目使用。 金格的说明文档写的很模糊,看完还是不知其所以然。下面就具体说下WebOffice2015集成vue项目的方式: 1、随便下载一个试用版 http://www.goldgrid.com/jinge_download/Index.aspx?num=5&amp;firsti...
1、 实现了通过B/S方式进行文档编辑操作。 本中间件将客户端的Microsoft Office 融入客户端IE浏览器中,使用户操作更方便。 2、 实现了最大限度的和Microsoft Office兼容。 用户无须经过更多的培训,就能够熟悉使用采用本中间件开发的文档管理软件。 3、 实现了通过网络在线编辑和保存服务器文档的功能。 用户通过中间件打开、编辑、保存服务器上的文档,就像操作本地的文档一样简单。 4、 实现了手写签名、电子印章、痕迹保留、版本控制的功能。 这几个功能是电子政务和办公自动化中文档管理最重要的功能,本中间件很好的实现了这些功能。 5、 实现了客户端软件自动升级的功能 本中间件采用插件技术,能够通过版本号的更新,实现客户端软件自动更新功能。
官网地址:http://www.goldgrid.com/jinge_download/index.aspx?num=5 解压后的文件 js文件中有两个重要的js文件iWebOffice2015.js和WebOffice.jsWebOffice.js是WebOffice2015对象的一些方法。iWebOffice2015.js是根据不同的浏览器环境来渲染<object> 安装iWebOfiice2... 在项目中可能会遇到加载ocx控件的需求,而加载控件是有局限性的,即只有IE内核的浏览器才支持,像谷歌都不支持,这个是个注意的点,所以页面加载该模块肯定要做判断。首先要在浏览器设置允许加载activex控件: 步骤:设置按钮——Internet选项——安全——受信任站点——自定义级别——Activex控件启用
PDF.js是为html5实现的在线预览pdf框架,所以你的浏览器要支持html5才能使用这个框架。 pdf.js使用步骤 一. 到官网下载 pdf.js 插件并解压 (地址: http://mozilla.github.io/pdf.js/ ) 1: 进入官网 2 : 选择稳定版 下载 3: 下载至本地 4 : 解压 5:将解压后的文件夹重命名为generic拷贝到tomcat的web...
### 回答1: 金格iweboffice2015是一款全面的办公软件套件,包含了多种办公应用程序,如文档处理、电子表格、幻灯片演示等。用户可以通过官方网站或第三方软件下载平台来获取金格iweboffice2015。 首先,如果您想从官方网站下载这个软件,您可以打开您的浏览器,输入金格iweboffice2015的官方网站地址。在网站首页,您需要找到相关的下载链接。按照网站提供的步骤和提示,点击下载链接即可开始下载金格iweboffice2015软件包。完成下载后,您可以双击软件包进行安装,按照向导进行步骤,最后运行软件。 除了官方网站,您还可以通过第三方软件下载平台下载金格iweboffice2015。打开您常用的软件下载平台,如应用市场或软件官网,搜索金格iweboffice2015。找到适合您设备的版本并点击下载按钮。下载完成后,请按照提示安装软件,并完成后运行。 无论您选择官方网站还是第三方软件下载平台,确保下载软件时选择安全可靠的来源,以免下载到恶意软件。 总之,金格iweboffice2015是一款功能强大的办公软件套件,下载非常简单。请根据上述提供的方法选择适合您的方式进行下载。 ### 回答2: 金格iweboffice2015是一款非常实用的办公软件,可以帮助用户进行文档编辑、表格处理、演示和PDF转换等功能。用户可以通过以下步骤来下载金格iweboffice2015。 首先,打开电脑上的浏览器,比如谷歌浏览器、火狐浏览器等。在搜索栏输入“金格iweboffice2015下载”并按下回车键。 接下来,在搜索结果中找到官方网站,点击进入。在官方网站上,找到“产品下载”或者类似的选项,点击进入。 在下载页面,选择适合自己操作系统的版本,比如Windows版本或者Mac版本等。点击下载按钮开始下载。 下载完成后,找到下载文件所在位置,双击打开安装程序。按照安装向导的提示,一步一步完成软件的安装。 安装完成后,桌面上会生成一个金格iweboffice2015的图标。双击点击图标,等待软件启动。 启动后,用户可以根据自己的需要进行文档编辑、表格处理等操作。还可以利用软件提供的模板和样式来设计演示文稿。 总之,金格iweboffice2015是一款非常实用的办公软件,用户可以通过上述步骤来下载并安装该软件,从而提高办公效率。
练气期小修士: 这个包的整合方法我提供在了我写的另外一个文章那边。 https://blog.csdn.net/weixin_42551915/article/details/123727399 完整的包我没有保存。已经交付了。现在也整理不出来。表情包