html页面生成pdf

男娘i 2022-12-15 02:20 271阅读 0赞

#### 方法 ####

> 主要用到html2canvas.js 和 pdf.debug.js

#### 原理 ####

> html2canvas.js ：通过canvas将HTML生成的DOM节点绘制到画布上,再可以通过自己的需求转换成图片  
> pdf.debug.js：将图片转成pdf

#### 注意点 ####

1.  html2canvas的配置项中配置 allowTaint:true 或 useCORS:true(二者不可共同使用，需要生成base64 用后者)
2.  img标签增加 crossOrigin=‘anonymous‘
3.  图片服务器配置Access-Control-Allow-Origin 或使用代理  
    其中第三步是最重要的,不设置则前两步设置了也无效。  
    服务器需要配置Access-Control-Allow-Origin信息,如PHP添加响应头信息，\*通配符表示允许任意域名：

> header(“Access-Control-Allow-Origin: \*”);

或者指定域名：

> header(“Access-Control-Allow-Origin: www.zhangxinxu.com”);

但如果不想麻烦后端的人员,那我们前端怎么跨域呢? 那就可以使用代理插件,如: html2canvas-proxy-nodejs 或者是 superagent

const request = require(‘superagent‘) // 导入
    const proxHost = ‘https://thirdwx.qlogo.cn‘ // 指定跨域图片的地址
    app.use(‘/proxy‘, function (req, res, next) {
      let urlPath = req.url
      console.log(‘urlPath‘, urlPath)
      urlPath = decodeURI(urlPath)
      if (!urlPath) {
        console.log(‘urlPath is null‘)
        return next()
      }
      console.log(‘proxy-request: /proxy->‘ + `${proxHost}${urlPath}`)
      const reqStream = request.get(`${proxHost}${urlPath}`)
      reqStream.on(‘error‘, function (err) {
        console.log(‘error‘, err)
      })
      console.log(‘------reqStream----‘)
      return reqStream.pipe(res)
    })

[参考链接][Link 1]

[Link 1]: http://www.mamicode.com/info-detail-2355338.html

发表评论取消回复

表情：

评论列表（有 0 条评论，271人围观）

还没有评论，来说两句吧...

相关阅读

相关 js将html页面转为pdf

在 JavaScript 中，可以使用以下两种方法将 HTML 页面转换为 PDF 文件： 1. 使用第三方库，如 jsPDF 或 html2canvas。 2. 使用浏

妖狐艹你老母/ 2024年03月27日 12:42/ 0 赞/ 92 阅读

相关 Freemarker生成HTML页面及字符串，HTML页面生成PDF文件

Freemarker生成生成HTML三种情况 1、通过.flt模板生成file 2、根据模板字符串生成file 3、根据模板字符串生成HTML文件字符串开始

超、凢脫俗/ 2023年02月26日 04:26/ 0 赞/ 10 阅读

相关 html页面生成pdf

方法 > 主要用到html2canvas.js 和 pdf.debug.js 原理 > html2canvas.js ：通过canvas将HTML生成的DOM节点

男娘i/ 2022年12月15日 02:20/ 0 赞/ 272 阅读

相关 html页面读取pdf案例

html页面读取pdf案列，如下图所示 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

约定不等于承诺〃/ 2022年10月12日 01:23/ 0 赞/ 310 阅读

相关飞翔pdf生成html,pdf转换成html转换器

pdf转换成HTML转换器是一款pdf转换工具，可以把pdf格式文件转换为html文件，直接在浏览器中浏览。pdf转换成HTML转换器支持批量转换，并且界面简单，功能稳定使

电玩女神/ 2022年10月06日 11:58/ 0 赞/ 234 阅读

相关 freemarker+ITextRenderer 生成html转pdf

网上已经有比较多的例子写这个但是很多都是简单的 demo，而且有很多隐藏的问题或者是零散的对某些问题的解决方案本人再次写一个完整的demo 无bu

- 日理万妓/ 2022年08月21日 05:41/ 0 赞/ 285 阅读

相关从html生成pdf

PDFs are one of the most common and most significant document formats on the internet. T

Love The Way You Lie/ 2022年07月13日 16:15/ 0 赞/ 260 阅读

相关 html生成pdf解析问题

错误的问题分析，先一大堆的错误，其实看第二行就可以知道是在解析html中的table元素的时候遇到了问题，去html页面一看，果然 div包裹了 tr标签导致这个问题 c

小咪咪/ 2022年06月14日 07:18/ 0 赞/ 284 阅读

相关 iText实现HTML页面导出PDF

iText实现HTML页面导出PDF 引言实现效果前期准备实现功能 1、需要的jar包 2、封装导出类

Dear 丶/ 2022年02月27日 10:50/ 0 赞/ 850 阅读

相关 html 转 pdf 生成页脚

方式一：(生成pdf的时候加) 分享一个 html 转 pdf 生成每页页脚具体自行看源码，我页是在网上找的资料侵权即删 [网盘链接地址][Link 1]

左手的ㄟ右手/ 2022年01月31日 02:41/ 0 赞/ 514 阅读