쓸만한 주저리

A4에 2단으로 그림 인쇄할 수 있게 뿌리는 자바스크립트

봄돌73 2008. 10. 22. 15:54

〈는 특수문자


〈body>

〈!-- body가 없으면 복사한 단을 화면에 추가할 수가 없습니다. -->
〈span id=containerspan style=position:absolute;left:0px;top:0px;background:gray>〈/span>
〈script>
  //설정값들입니다. 대략 영어 단어의 뜻을 생각하시면 아실 수 있을 겁니다.
  //A4 용지의 mm 값을, 인쇄 미리보기를 이용해서 역산한 값들입니다. 단위는 픽셀(px)입니다.
  //인쇄 환경에 따라 아래 값들을 고치셔야 합니다.
  //그림에 대한 설정은 없는데 그림의 가로가 너무 길면(단의 길이보다 길면) 안됩니다.
  var limitheight=1020  // 이 값보다 크면 다음 단으로 넘어갑니다.
  var currentheight=0   // 현재 단에 들어온 내용들의 높이를 합한 값을 넣을 겁니다.
  var column=0          // 현재 단이 좌측인지 우측인지 나타냅니다. (좌측 : 0, 우측 : 1)
  var columnwidth=332   // 단의 너비입니다.
  var columnspace=36    // 단과 단 사이의 간격입니다.
  var page=1            // 쪽 번호입니다.
  var columnheight=1037 // 단의 높이입니다. 2쪽까지만 가지고 측정한 값이라 실제로는 다를 수도 있습니다.
  var pagespace=10      // 쪽과 쪽 사이의 간격입니다.

  //배열을 선언해서 파일 경로를 입력합니다.
  //실제 사용하실 때는 배열 없이 파일 이름을 1.gif, 2.gif 식으로 해서
  //imgobj.src=answerarray[i] 대신 imgobj.src='url 경로'+i+'.gif' 식으로 사용하시는 것이 더 편할 겁니다.
  var answerarray=new Array()
  answerarray[0]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[1]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[2]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[3]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[4]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[5]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[6]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[7]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[8]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[9]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[10]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[11]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[12]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[13]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[14]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[15]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[16]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[17]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[18]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[19]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[20]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[21]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[22]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[23]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[24]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[25]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[26]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[27]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[28]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[29]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[30]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[31]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[32]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[33]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[34]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[35]='http://www.phpschool.com/images/100dedi.gif'
  answerarray[36]='http://www.phpschool.com/images/100dedi.gif'

  //그림을 넣을 단 개체를 가져옵니다.
  var containerobj=document.getElementById('containerspan')
  containerobj.style.width=columnwidth

  for(var i=0;i〈answerarray.length;i++){
    //그림 개체를 만듭니다.
    var imgobj=new Image()
    imgobj.src=answerarray[i]
    imgobj.hspace=10
    imgobj.vspace=10

    //현재 단 개체의 높이와 그림 개체를 더합니다.
    currentheight=currentheight+imgobj.height+imgobj.vspace*2

    //위 계산 결과가 제한보다 크면, 단을 복사해서 또 하나의 단을 만듭니다.
    if(currentheight>limitheight){
      //단 복사
      containerobj=containerobj.cloneNode(true)
      //복사한 단의 내용 지움
      containerobj.innerHTML=''

      //단의 위치에 따라 값 설정
      if(column==0){
        containerobj.style.left=columnspace+columnwidth
        column=1
      }
      else{
        containerobj.style.left=0
        containerobj.style.top=(columnheight+pagespace)*page++
        column=0
      }

      //단 추가
      document.body.appendChild(containerobj)

      //단 높이 초기화
      currentheight=imgobj.height+imgobj.vspace*2
    }

    //단에 그림 추가
    containerobj.appendChild(imgobj)
    containerobj.innerHTML=containerobj.innerHTML+'〈br>'
  }
〈/script>